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مقدمة ٠‏ 
ان تعلم تصميم و برمجة المواقع ليس بالامر الصعب و انما يحتاج فقط لبعض 
الجهد و المثابرة » ولذلك انصحك عزيزي القارئ ان تقوم بتنفيذ الامثلة الموجودة في 


بداية استطيع القول ان الاسلوب المناسب في شرح متل هذه المواضيع هوالتركيز 
الشرح. 


قد يتسال البعض لماذا قلت تصميم و برمجة »› في الواقع ان العمل على انشاء 
موقع على الانترنت يمكن تقسيمه على مرحلتين : الاولى و هي التصميم و تكون 
بتصميم الكاول رالات ر ارال الصرر ا ا ا ا م ا 
اګ اما المرحلة الثانية فهي البرمجة و تكون بعمل الحركات و (عنمصه”رك) 
على الموقع بتحرك الصور وتغير الالوان و التاكد من صحة المعلومات المبعوثة من 
نموذج معين و...الخ ويمكن تطبيق هذا الجز ء بكثيو منًالغات البرمجة أكن أعل أشهرها 
هي Java script‏ 
۾ VB script‏ . 


قد يكون لديك الان بعض من الامور الغامضة لكن باذن الله تعالى سوف يتضح 
کل شئ مع الشرح 


اذا فالنبدأ على بركة الله ...ولنبداً بلغة HTML JI‏ 


خطوط اساسية : 
6 هنا سوف نقوم بشرح 1۷1[ وسوف نتطرق خلال الشرح الى 
XH M1, HTML‏ وسوق نحاول ان نبين الفروق الاساسية 
EA EEE ls E ER‏ 
1. الرأس (4ھءH(‏ 
BOI ES‏ 
3. شريط الحالة (status)‏ 


. ۰ 
: کما هو مبين في الصورة‎ 
A Google, - Microsoft Imer net Explorar 


Fle Edt View Favorkes Took Hep 


Ot . ا‎ E) م‎ ۶ Search Tp Fortes gi 


ses |B] https ffherewt, google, com 


بست #اوو0ق | شرية عظ | 


© البست في ويب © البحت في للظة العرببة 


عل ماشمب سره عن چاو روچ کا ٠‏ وااو E‏ ہ¡ co‏ ووا 


و يحتوي الرأس(4ه٥1])‏ على عنوان (ع[):۲) وهو الموضح في الصورة التالية : 


و في ال 1۷1[ سوف نستخدم فقط جزئي الرأس و الجسم 


6 يمكن تقسيم لغة 1۲1 الى الاجزاء الرئيسية التالية : 
11 وهي تقسم بدو رها الى : 
Main Tags o‏ 
Tags o‏ 
Attribute .2‏ 
Special characters .3‏ 


توضیح: 


Tags. 1‏ 
اوسمة للقيام بوظائف معينة مثل توسيط الكلام » جعل الخط مائلاء جعل الخط غامقاء...الخ 
وهو يقسم الى نوعين : 

ags 6‏ ا :Main‏ ويكتب حسب الصيغة التالية: 

< اسم الوسم > أو </ اسم الوسم > مثلا <إط>او </ > وذلك لعمل خط افقي 


6 sعهآ:‏ ويكتب حسب الصيغة التالية : 
< اسم الوسم/> 
مثلا. 
>aaİ</centerد <center>‏ 
وذلك لتوسيط كلمة "أحمد"(جعلها في المنتصف) 
>center<‏ يسمى هذا الجزء ڇ۾1 
</center>‏ يسم Anti Tag ء«jجئl I‏ 
(لاحظ ان الفرق بين النوعين هو ان النوع الاول لا يحتوي على ڇھ۲ )A ٩)1‏ 
وسوف يتضح اكثر مفهوم الاوسمة وعملها ونوعيها من خلال الامثلة. 
Attribute .2‏ 
لاضافة خصائص للاوسمة متلا للتحكم بلون الخط نستخدم Attribute I‏ التالي 
<font color = red > Text </font>‏ 
Special Character .3‏ 
و ذلك لطباعة حروف خاصة مثلا لطباعة اشارة اكبر < نستخدم إع† 14a‏ 1هذءعمS؟‏ التالي: 
;٤ع‏ (لاحظ البداية ب ك والنهاية ب ;) 
أو مباشرة 
> 


لكتابة الكود : 

لكتابة كود بلغة الهتمل تحتاج فقط للبرامج التالية : 
1. انترنت اكسبلورر ) وسو awiخدpم (Microsoft internet explorer lik‏ 
و الذي ينزل تلقائيا عند تنزيل الويندوز 
2. اي برنامج لتحرير النصوص ولذلك يمكنك استخدام 4همعاهN‏ ايضا الذي ينزل 
تلقائيا عند تنزيل الويندوز وهناك برامج اخرى مثل 
هم 1x‏ والذي يمتاز عن ال 4ه2مء†هN"‏ بكونه يعمل على تلوين العناصر 
الاساسية للغة الهتمل و بالتالي اكتشاف الاخطاء الاملائية حال حدوثها و يمكن تنزيل 
البرنامح من [الموقع .التالي: 
www.textpad.com‏ 
و ايضا يمكنك استخدام برنامح الفرونت بيج المشهور الكتابة الكرد والتعديل على 
e‏ 


وكما تلاحظ ... 


اذا اخترٽ wlتخpl gy Notepadd! جaliرڊ sg Microsoft internet explorer‏ 
لديك ويندوز فانك لست بحاجة لتنزيل اي برنامج . 


و الان عزيزي القارئ انت قادر على البدء بكتابة اول كود لنا بهذا اللغة السهلة ... 


2 تى اقرلى‎ - Mirren ner | mplorer - [Working fiir] 
Pk Eli view Fakes Tools Help 


3 ا = j Seerh TT  Fauiher 2 Rha‏ : ۳ 5 3 ج 

hdres: fF Cromer ae Salina iAdrrur ter lOaalicgrasdea ind E :* E 
آھلا راا پش‎ 
هې دوت‎ 


FF Kerpiîsî 

1 PAT E لكتابة الكود‎ 

اولا: افتح برنامج تحرير النصوص( و ليكن لهمءهN)‏ 

تانيا : من قائمة ملف (ء]۴1) اختر حفظ باسم (ئج م۷جء) او حفظ (ع۷جء) و في 

صندوق الحوار اکتب الاسم الذي ترد ان تجعله للصفحة و تاكد من وضع الامتداد 
.htm1‏ او htm‏ مثلا 

Index.html 


ثالث ك ا 


<html> 
<head> 
<title> 
صفحتي الأولى‎ 
</title> 
</head> 
<body> 
<center> 
أهلا وسهلا بكم‎ 
<br> 

في موقعي 
</center>‏ 
</body>‏ 
</html>‏ 


<> سرک ااا 
ما بین <امط> وبين ال <1ہtط/<‏ یJian‏ كود HTML‏ 
لاحظ انها من النوع الثاني من الاوسمة فهي تحتوي على عه وعلى عه )١ج‏ 


<headDrrrrrrrrrnnnnnnnnnmnnnn</head> 
ما بين <لهعط> و بين ال <لهعط/> يمثل ما سيكون في جزء الراس (لهعط)‎ 
ج١) لاحظ انها من النوع الثاني من الاوسمة فهي تحتوي على عه† وعلى عه)‎ 


<title> </title> 
ما بين <ع[ا)> و بين ال <ع][)ة)/> يمثل العنوان و الذي سوف يكون في الراس وفي مثالنا سوف نطبع" صفحتي‎ 
الاولى"‎ 
ج١) لاحظ انها من النوع الثاني من الاوسمة فهي تحتوي على عه وعلى عه)‎ 


ما بين <رلهط> و بين ال <رلهط/> يمثل ما هو موجود في جزء الجسم (ولهط) 
لاحظ انها من النوع الثاني من الاوسمة فهي تحتوي على عه وعلى عها ا١ج‏ 


<center> </center> 
ما بین <۲عامعع> وبين <۲اعارع»ء/> يتم له عملية توسیط‎ 
وهنا لاحظ ان العبارتين" هلا وسهلا بكم " و عبارة" في موقعي" تم طباعتهن في منتصف الصفحة‎ 
ج١) ولاحظ انها من النوع الثاني من الاوسمة فهي تحتوي على عه وعلى عع‎ 


وذلك للنزول الى السطر التالي ) اي تعمل عمل ال (Enter‏ 

ولاحظ انها لا تحتوي على عه )١ج‏ 

ولذلك فان هذا الوسم يمثل النوع الاول (ئعه† )Ma¡١‏ 

و السؤال الان : ماذا لو كتبنا الكود كما يلي : 

هلا وسهلا بكم 

في موقعي 

دون استخدام <إط> هل سيطبع" أهلا وسهلا بكم" ثم ينزل سطر الى الاسفل ليطبع "في موقعي" ؟ 
الجواب: للاسف لا سوف يقوم بطباعة الجملتين في نفس السطر و لذلك نحن نقوم باستخدام <إط> بالاضافة 
الی طرق اکر برف بے کرجا 


رابعا: من قائمة ملف (ع]۴1) اختر حفظ (ع۷جء) 


خامسا : اذهب الى المكان الذي خزنت به الملف ستجد ان ملفك ۰ index‏ ُ5 


موجود وهو علی شکل ملفات انترنت 
افتحه وسترى اننا قمنا بتصميم الصفحة الموجودة في مثالنا 


الان لو اردنا اجراء بعض التعديلات على الكود هناك طريقتان : 
1. من برنامج تحرير النصوص اختر قائمة ملف (File)‏ و منها اختر فتح (open)‏ 
واختر الملف الذىار ك التعديل عليه 
2. من صفحة الانترنت اذهب الى عرض (سع 1ب ) ومن القائمة المنسدلة اختر 
مصدر (عع0۲ء) أو انقر نقرة يمين على اي مكان من الصفحة و اختر عرض المصدر 
ce(‏ ا0ء سعv1)‏ في الحالتين تفتح لك نافذة 2dمءهN‏ و هي تحتوي على كود 
الصفحة 

اجري التعديلات ثم اعمل حفظ (save)‏ 


| 
ثم اذهب الى صفحة الانترنت و اعمل تحدیٹ (refresh)‏ من خلال الايقونة 2 


كما تلاحظ من المثال رقم 1 فان البنية الاساسية لكتابة الكود في الهتمل هي: 


a TE E. 


6 جمیع هده الاوسمة اختيارية اي يمكن وضعها او عدم <head>‏ 
وکا گنی 2 2 <title>‏ 
عت ا 
</title> gS‏ 

الرأس (ل2ءط) و لا يحتوي على عنوان (ع[) ۲ ) او 1 

قد لا يحتوي مثلا على جزء الجسم (لإلهط)....الخ لا /head>‏ 
تشغل بالك كثيرا بهذا الموضوع <body>‏ 
عا و البنية الا 

©6 قد يحتوي جزء الراس على وسام اخر غير العنوان </body>‏ 
يسمى وع وهو لاغراض محركات البحث وسيتم 
</html> ib OE‏ 


و الان عزيزي القارئ قبل البدء بالمثال الثاني › ارجو ان تكون قد ادركت مفهوم 


الاوسمة (وعها )لان ذلك مهم جيل ا ل ك 0 ٨۳٨50‏ ا 
لدبك فان الاتة القادمة ان تاظ س و 


متال ۰:2 
دل على الكود الموج د ااا ا ا 0 ا ا 


3 صقو ارلم‎ - Nhl cng Mrmr Cte 


ا i‏ قا 7 ا ع“ 2 FF eaten‏ اچ ل f‏ 2 ا ۰ ا 
yem Û rO mei srl Sailirege ra itrîy sior Deba peme, hii e E7 * Bixe‏ 


آهلا وسهلا بكم 


Bjorn i Ry Coat 


الكود بعد التعيل ؛ 


<html> 
<head> 
<title> 
صفحتي الأولى‎ 
</title> 
</head> 
<body> 


<center> 

<1ط/>أھلا وسھلا بکم< 11> 

<br> 

<ط/ >< /><1/>في مو قعي <1> <ږں><(ا> 
</center>‏ 

</body> 

</html> 


لاحظ ان الكود لا يختلف كثيرا عن المتال الاول ولذلك سوف نشرح الفروقات : 
<1ط/>أھلا وسھلا بکم< 11> 
الموجود ما بین <1ط> وبين <1ط/> یصبح خطه کبیر و غامق 


><> مو قعي <1> <ں‎ E 


الموجود ما بين <ط> وبين <ط/> يصبح غامقا 
الموجود ما بین <ں> وبين <ں/> يصبح تحته خط 
الموجود ما بين <> وبين <¡/> يصبح بخط مائل 


ملاحظات 

1. اذا لم یتم اغلاق ال ع۲۵ ب ها امه يعني مثلا : 

كتابة <ط> دون كتابة <ط/> لا يحدث اي خطأ و يتم عمل المطلوب لكن من ناحية 

البرمجة والتصميم فان ذلك يعتبر خطا فادحا وهو يزيد من صعوبة الصيانة والتعديل 

2. اذا لم يتم الاهتمام بالترتيب يعني متلا : 

< /><u<>/b/>فى‏ مر قعى< 1> <uں><bۆ>‏ 

ايضا لا يحدث اي خطا و يتم عمل المطلوب لكن ذلك ايضا سوف يزيد من صعوبة 

التعديل و الصيانة 

3 لقد استخدمنا في هذا المثال الوسم <1ط> وقلنا انه يجعل الخط كبير وغامق 
وهناك ايضا <12<,>13<,>14<,>15<,>16> و جمیعھا للتحكم بحجم الخط 
وغمقه و اكبر ها على الطلاق <1ط> واصغرها <6ط> 

,>h4<,> h5 <, >6< .4‏ <3 >, <12 >,<1ط> تعمل ایضا علی انزال المؤشر 
الى السطر التالي وبالتالي لم يكن هناك داعي لاستخدام الوسم <إطا> في مثالنا 
الثاني . سوف تتضح النقطتين 3 و4 من الملاحظات عن طريق المثال التالي : 


مال 3 : اكتب الكود التالي : 
<html>‏ 
<head>‏ 
<title>‏ 
صفحتي الأر لت 
</title>‏ 
</head>‏ 
<body>‏ 
<center>‏ 
<1ط/>هذا هر خطh1<1>‏ 
<2ط/>هذا هر خط12<2> 
<13/>هذا هر خطh3<3>‏ 
<4ط/>هذا هر خطh4<4>‏ 


<15/>هذا هر خط15<5> 
<6ط/>هذا هر خط6 <16> 
</center>‏ 

</body> 

</html> 


3 صق ارم‎ - hhc nu Mem Cte 
Hk E ea Fister Tok Hep 


E 3‏ 3 و 2 @ سو سد و ےا ل ن 
EI CO eras ard Sette itr ator Deshbog rhea in 2 EI * ae‏ 


5 Wl Fy Comike 


لاحظ الفروق ما بين <6> AES TT‏ 
ولاحظا ا 0 10000 6 > 
ولاحظ عدم الحاجة لوجود <> للانتقال الى السطر التالي . 


و الان... لعمل فقرتين مثلا : 


Sa‏ الفقرة الاولى 
e‏ الفقرة الثانية 
1. استخدم ح][ا> بعد الفقرة الاولى لتصبح : 
<body>‏ 
أهلا و سهلا بكم 
<br>‏ 
</body>‏ 


2. استخدم الوسم <م/>~ہ~~ہ<م> حیث انه ما یوجد بین <م> وبین <م/> 
يمثل فقرة 2 مثالنا يصبح الكود 

<body> 

<م/> اهلا وسهلا بکم<م> 

<م/>في موقعنا<م> 

</body> 

3. استخدم الو سم <۲۵م/> ہہ ہہہ<ع]م> حیث انه ما یوجد بین <۲۶م> 

وبین ٥<‏ ۲م/> یکتب كما هو من الکود الى صفحة الانترنت اكسبلورر في 

مثالنا يصبح الكود 
<body>‏ 
<prez‏ 


هلا وسهلا بكم 


</pre> 
</body> 


و الان لناخذ مجموعة أخرى من الاوسمة (وعه]) و نتعرف على وظائفها : 


<srike>ںqwg‎ IlaÎ</strike> 
لوضع خط على الكلمة في مثالنا مثلا: أهلاوسهلا‎ 


< م/>أهلا وسھلا<n‏ ر م> 
يقوم بنفس عمل <> أي جعل الخط مائلا في مثالنا مثلا: أهلا وسهلا 


<strong> gw Iaİ</strong> 
يقوم بنفس عمل <ط> اي جعل الخط غامقا في مثالنا مثلا : أهلا و سهلا‎ 


مثال 4 : 
دمم النافدة التالية 


33 مقو ارلم‎ - Nhl ps1 | Hemrl Clearer 
Fk EE ea Fiat Tok Hap 1 
ا 2 ا‎ earch GT Peaks کد 2 37 ا ت‎ 
ا‎ + * Bizet 


لاااات اين ا ا ااا ا اا E‏ 


1 ت 
السلام عليكم ورحمة الله وبركاته 
أهلا وسهلة يكم الي وتي 
e E‏ 
كلك ي نتا لدرخ ان تھا ما ترود نن عور شارات لتلية 
EHH‏ 

Toyama 


Hina ikn 


J Fy Camis 


لتصميم الصفحة قم بكتابة الكود التالي : 


<html> 

<head> 

<title> 

صفحتي الأولى 

</title> 

</head> 

<body> 

<center> 

<1ط/> السلام عليكم ورحمة الله وبركاته<1ط> 
أهلا وسهلا بكم في موقعي 
<br>‏ 

<مرم/> عالم السیارات<رمع> 


<م/> يمكنك في هذا الموقع ان تجد ما تريد من صور السيارات التالية<م> 
<prez‏ 
BMW‏ 


Toyota 


Nissan 
</pre> 
</center> 
</body> 
</html> 


اقرا الكود بتمعن فهذا المثال يعتبر تطبيق عملي مباشر للطرق الرئيسية الثلاث لعمل 
الفقرات و التي تم شرحها من قبل . 


Attributes 


Attributes 


تستخدم الصفات (ءءاںط۸))۲1) وذلك لاضافة خصائص للاوسمة (ئعة1) 


حتى يتضح الامر اكثر لناخذ المثال التالي: 
مان5 
صمح اأنافذة التالية : 


EFE 


3 صقو ارم‎ - Nhl lng Mrmr Ex lere 


Fk E ia Fate: Tok Hap 


HH‏ < ك ل Feehan‏ مد ق کا كا 
E Comers srl Satire pda iby air ekop peda hil 3 = E seq 5‏ 


السلام عليكم ورحمة الله وبركاته 
لد وھا بک في مسري 
غلم لراك 
پت ق کا ارقم قل لجن ما ترید من ضور پارات الاد 
enw‏ 
Teja r‏ 


Hiznsan 


ازج له تزوزي لالاز اجنل الارقات 


E] ce gl MY Camis 


لتصميم هذه الصفحة اكتب الكود الفا 


<html dirz=rtl> 

<head> 

<title> 

صفحتي الأولى 

</title> 

</head> 

<body> 

<center> 

<اf0n/>‏ السلام عليكم ورحمة الله وبر کاتە<لع]=or <font size=26pt col‏ 
<br>‏ 

أهلا وسهلا بكم في موقعي 

<br> 

<مرع/> عالم السیار ات <رمع> 

<م/> يمكنك في هذا الموقع ان تجد ما تريد من صور السيارات التالية<م> 
<prez‏ 

BMW 


Toyota 


Nissan 

</pre> 

</center> 

ارجو لك عزيزي الزائر اجمل الاوقات 
</body>‏ 

</html> 


لاحظ ان الكود في هذا المتال لا يختلف كثيرا عن الكود الموجود في المثال رقم 4 لكن 
هناك الفروقات التالية : 

<html dir = rtl> 
تعمل على محاذاة جميع النص الى الجهة اليمنى مالم يحدد غير‎ >------- dir =rtl 
ذلك (مثلا استخدام التو سيط) ولاحظ عملها على الجملة اجو ت عر ر ی الزائر اجمل‎ 
. الاوقات" لانها 2 التو سيط‎ 


<اصf0/>‏ السلام عليكم ورحمة الله وبر كاتە<لعإ=]co10 <font size=26pt‏ 


Size=26pt‏ --------------> تعمل على تحديد حجم الخط للعبارة الموجودة ما بين 
>fon t<‏ و >/f0nt<‏ ليصبح 26 نقطة . 
Color=red‏ -------------> تعمل على تحديد لون الخط للعبارة الموجودة ما بين 


<اfon>‏ و >/font<‏ ليصبح أحمر (یمكنك استخدام رقم للون مثلا #4۴۴4 =إoآهc‏ 
ولاحظ ان الرقم يكون بالنظام 21ر1ءءله×م1 ولاحظ استخدام اشارة #). 


ملاحظة: اذا كان ما بعد اشارة المساواة عبارة عن جملة (يوجد مسافات) فيجب وضعها 
ما بین ” او مابين ‹“ ثلا ۰ 

>p id= “wadea asad” <‏ او < “wadea asad‏ = إ1¡ م> لاحظ لوجود الفراغ بين 
الكلمتين aءلaج‏ سو هوه وضعنا ”“ او ”“ و تستخدم الصفة إ1 مع الوسم <م>وذلك 


ارجو ان يكون مفهوم عا ںط۸))۲1 قد وضح لديك عزيزي القارئ على اية حال من 
ae a CO EOCENE‏ 


Special Characters 


Special Characters 
<,>,&,©,1"™ نستخدم ءإع )ه2۲ طء اهاءعمء وذلك لطباعة حروف خاصة مثل‎ 
...........الخ ومن اهم هذه الحروف الخاصة "المسافة"‎ 
توضیح:‎ 
لو اردنا ان يكون البعد بين كلمتين بمقدار مسافتين فماذا نعمل؟‎ 
مل نکتت مقاد الکلم زارو لی تتت قار ا 2 ا‎ 
أحمد رامي؟‎ 


ست 


بعد بمقدار مسافتین 
للاسف عزيزي القارئ لو فعلت ذلك او وضعت مليون مسافة فالنتيجة سوف تكون على 
المتصفح فقط مسافة واحدة لا غير ولذلك سوف نحتاج الى الحروف الخاصة أحل هذه 


المشكلة . 
اليكرالان عزير ى الفا ع اشر السا ت ا ا ٠‏ 2 2 

لعمل مسافة (عمعممء) &nbsp;‏ 
لعمل اشارة اصغر > &lt;‏ 
لعمل اشارة اكبر < &et;‏ 
لعمل شارة حقوق الطبع © &copy;‏ 
لعمل اشارة علامة تجارية ×1 &trade;‏ 
لعمل رقم كسري في مثالنا 3/4 &frac34;‏ 
لعمل اشارۃ &amp; & ۸۸ND‏ 


e A a E N OO EE 
الحروف ا‎ 


مثال 6: 
صمم الصفحة التالية : 


3 .قى اول‎ N iar Eli 3 


Th CE e Tela Ti lak 1 
7 : tawehi Farris 7 1 1” i 4 
| Slack and Satiregl phair Cek cgi ada hl ¥ Ela 2 i aq! 2 


تلا لي فا ر بف بن رر لام بطر لها عل 

يبلي الال لا العصر ما بني 

اشا اسف 

2 لسارم ابر 

اسار حرق الطب 

وتطلنا إيطا انه يقن تثاية اشارة الأصفر د الأغز دون العاجة الي اشام حروف غاص 
نال 
سام اسر 


باو اتر | 


E] ira ت‎ 


<html> 
<head> 
<title> 
صفحتي الاولی‎ 
<l/title> 
</head> 
<body> 
<p align=cente1>pكڊ‎ Iڊaرمو‎ ںاa</p>‎ 
<p align=right> 
تطمتا في هذا الدرسن بعصا من الحروف الخاصة‎ 
&nbsp;&nbsp;&nbsp;&nbsp; 
سنذکر منھا على‎ 
<br> 
سبيل المثال لا الحصر ما يأتي‎ 
<br> 
شار اس‎ 
&lt; 
<br> 
اشارة اكبر‎ 
&gt; 
<br> 
اشارة حقوق الطبع‎ 
&copy; 
<br> 
رتفا ها انه كن كا رة الأضر و الاكر ون الحاكة ال‎ 
استخدام حروف خاصة‎ 
<br> 
<br> 
اشارة اصغر‎ 
< 
<br> 
اشارة اكبر‎ 
> 
</p> 
</body> 
</html> 


شرح الكود: 


E SO ci 
&nbsp;&nbsp;&nbsp;&nbsp; 


سنذکر منھا على 
لعمل المسافة < 2 e‏ 
لاحظ ان البعد بين كلمة "خاصة" و كلمة "سنذكر "بمقدار اربع فراغات 
اشارة اصغر 
&lt;‏ 
(©)اشارة اصغر بالانجليزي< کے کے 
انار © 
&gt;‏ 
(<)اشارة اكبر بالانجليزي < ES aoe‏ 
اشارة حقوق الطبع 
&coPpy;‏ 
اشارة حقوق الطبع ©> 8 E‏ 


و الان عزيزي القارئ لننتقل الى شرح اعمق وتفصيل أكثر لهذه اللغة السهلة 


إدراج الصور 
قد نرغب باضافة صورة الى صفحة الويب و لعمل ذلك نستخدم الوسم التالي : 
<img SIC=...... >‏ 
وبعد ال ما uطذإ))A‏ (=ءإء) يكتب عنوان الصورة وهو قد يكون احدى الحالات التالية 


6 على !لٺنترنٽ URL(uniform resource location)‏ 
مثلا. 
http//:www.stars4arab.net/uplo/wadea.GIF‏ 
أ 
و 

6 على الشبكة المحلية (۸۸) بمعنى آخر 

UNC(universal naming conversion) 

٠ مثلا‎ 

\\itlib\mywebsite\wadea.GIF 

أ 
و 

6 على جهاز الحاسوب (1هعه1) 

متلا . 
C:\myweb\wadea.jpg‏ 
واذا كانت الصورة على نفس مسار (directory)‏ صفحة الانترنت تكتب اسم 
الصورة مباشرة 
ملا لوان صفحة الانتونت ا ا عل 0 ادات ا ا 
الصور(م.ط.2ءلaس)‏ نكتب ما يلي : 
Wadea.bmp‏ 
و اذا كانت الصورة في مجلد وهذا المجلد على نفس مسار صفحة الانترنت نكتب 
اسم الج 
مثلا. 
Img/wadea.gif‏ 
لنأخذ الان مثالا و نطبق عليه ما شرح و ناخد خصائص أخرى لوسم ادراج الصورة 


مثال 7 : 

لدينا صورة DawnOverW ater qaw‏ وهي ذات الامتداد .jPE‏ وهي موجودة 
بنفس المجاد الموجود فيه صفحة الانترنت المراد تصميمها »> سوف نكتب الكود 
الازم لتصميم هذه الصفحة لتظهر كما يلي : 


Fl E aa Fem Tol Halk I 


4| O - e E û et me O) Û: ê A * lw 


ark kasr (2 Êaamenin amel Latter irinkair air eth taplpa ara. hirl Am iie * o 
ج یھ ن کے ب تو هص نو ن ص ووا تة ا غ۸ س ےا وو تہ یام ےی ری 2 ت ا ای رزجو کا ے2 فف یا و پت ار سے ی مجه‎ 
4 زغ نظا‎ 
مرر: ددن ر ۲ 2 ا ا‎ 
الأحظ علد رشع الموشز طى الصنر ر2 تفلو اها لائة تر ضيدوة و سڪ‎ 


— 


ی اتا لیر البرارح کا کے >“ 
e,‏ ت a.‏ 


ر بغ إو ساق 


<html> 
<head> 
<title> 
</title> 
</head> 
<body> 


<img src=DawnOverWater.jpg align=left alt=7Jlîa width=30% hight=30% > 
7 صورة لمثال رقم‎ 

<br> 

لاحظ عند وضع المؤشر على الصورة تظهر لنا لائحة توضيحية للصورة 

<br> 

في متالنا تظهر العبارة مثال7 


</body> 
</html> 


شرح الكود: 


<img src=DawnOverWater.jpg align=left alt=7Jlîa width=30% 
hight=30% > 


img src= DawnOverWater.jpg ===---------‏ 
الادراجچ الصورة ولاحظ لان الصورة بنفس المسار ذكرنا اسم الصورة فقط 
لجعل محاذاة الصورة أجهة اليسار اي انها يسار النص < align=left‏ 


عند وضع المؤشر على الصورة تظهر لائحة توضيحية يكتب فيها مثال7<----مثال 7ا[ 
تحديد عرض للصورة وهو 30 بالمئة من عرضها الإصلي <----1=30%) ل1 


تمد ا5 فاع اا ر2 30 بالمنة ا 2 2 i ETD a‏ 
ملاحظات: 

1. لغة الهتمل غير حساسة لحالة الحروف(صغيرة او كبيرة) فلو قلنا [M6‏ لا تفرق عن 

ع1 و كذلك الامر بالنسبة الى اسم الصورة فلو قلنا عمز.ء)1W2ء07,‏ س4( او قلنا 

£ pز.0verwater awn‏ نفس الشئ . 


2.يمكن في الصفات ط1س و اطع1ط ان يكون العرض و الارتفاع بالنسبة المئوية كمافي 
مثالنا السابق او بالبكسل فنذكر الرقم بالبكسل مباشرة مثلا: 


ار Width=50s-‏ 
الازتقاع 100 بكس < 00 Hight=1‏ 

3الصفة )1ج تمثل ايضا ما سوف يظهر اذا لم تكن موجودة الصورة و المثال التالي 

لتو ضیح هذه النقطة. 

مثال 8 : 


اذا لم تكن لدينا الصورة عمز.إء)ة ۲۷ء0۷ ,سه( وكتبنا الكود الموجود في المثال رقم 7 
فان الشاشة سوف تظهر کیال 


3 مقط الم‎ - Nl ln Mra Erp erer 


Fk E ima Fate Tk Help f 
یا 2 © س چو مدر و ھا ا‎ a > ا‎ 

3 E | Comers sra Satire praia Deabop prehea hiail = " ze 

صسررة لمل رم * بد ]ع 


لاط سد وسم النوشن على السورة الي لقا لالمة لر يميه الس رة 
لل تاا تنذير لار سثال» 


E] om gl HY Commie 
ادراج خط افقي‎ 
: لادراج خط افقي نستخدم الوسم <۲> وقد نستخدم معه بعض الصفات(عںط1ع))ه) التالية‎ 


لتحديد لون الخط ويكتب اسم اللون مباشرة او رقمه بعد الاشارة # < ھے = 06 
أتحديد محاذاة الخط (يمین وسط٬یسار)<‏ دک align‏ 

لتحديد طول الخط وهو اما ان يكون بالبكسل فيكتب الرقم مباشرة او < Wide‏ 
بالنسبة[المثوية بالنسبة الى الثناشة(الخط كميحتل من عرض الشاشة )فكب ب الرقم 
LAF‏ 

لتحديد سمك الخط وهو فقط بالبكسل فيكتب الرقم مباشرة< SIZ@-------‏ 


3 سقطو الرلم‎ Nn Her E erer 


Fil EJ ia Fate Tok Hep 1 
3 چو ن کا كا ر‎ 9 8 3 8 
E Û Cro nis sra Sathirege ja iiy sir Deabop predas, hail E3 * Bixe 


A | E 


٠ الكود‎ 


تمعن جيدا في المثال 
ولاحظ عملية ادراج 
الخط الافقي . 


ولاحظ استخدام 
الصفات المختلفة 
للتحكم باللون و 
المحاذاة و الطول 
والسمك . 


<html dir=rtl> 

<head> 

<title> 

صفحتي الاولى 

</title> 

</head> 

<body> 

بسم الله الرحمن الرحيم <center><font size=24pt<>‏ 
<fonb</center>‏ 

<br> 

قائمة المشتريات 

<br> 

<hr color=red size=10> 


<hr color=#0000 width=50% align=right > 
<br> 

برتقال 

<br> 

<hr color=#0000 width=50% align=right > 
<br> 

ليمون 

<br> 

<hr color=red size=10> 

</body> 

</html> 


و الان سوف ندرس كيفية ادراج ارتباط تشعيبي ( عند النقر على الارتباط التشعيبي تذهب 
الى صفحة أخرى او مكان معين من نفس الصفحة). 


ادرا ارتباط تشعيبي 


أولا: ماذا نقصد بالإر تبط التشعيبى؟ 

الارتباط التشعيبي هو عبارة عن وصلة (اما نص او صورة) عند النقر عليها نذهب 
الی صتفگة آنترانت اخری اوامکان این ان نفس اہ فة اوم ات ل کے ا ا 
يمكن ان يشغله الويندوز (صورة › فيديو »ملف مضغوط......الخ)او حتى تشغيل محرر 
الاميلات الافتراضي لكتابة رسالة الكترونية مثل برنامج 00ا†uه MS‏ . 


لو و اسر 


نستخدم الوسم <و/><ه> و الصفة ۲۴ط كما يلي : 


<a re </a> 
ر‎ 
1 


1[. يكتب عنوان صفحة الانترنك ا 0 a o o o‏ 
نفس الحالات التي تم شر طا کے در ادراج الصورة 

http://www.stars4arab.net/uplo/wadea.zip ںÛn‎ 

اويكتب الاميل المراد عمل ارتباط تشعيبي له وذلك كما يلي: 

mailto:software en2002@yahoo.com 

كلمة :)انه ضرورية ونكتب بعدها الاميل . 

2.تكتب هنا الوصلة (النص او الصورة ) التي نريد ان ننقر عليها(ارجع الى تعريف 
الارتباط التشعيبي ( 

في حالة ان يكون الارتباط التشعيبي لاميل عند الضغط على النص او الصورة يفتح لنا 
برنامج محرر الاميلات الافتراضي وعند كلمة :10 يكتب الاميل كما في الصورة : 


E] T2: (software en2OUEmyahoa,corn 


مثال 10: 
لنقوم بتصميم الصفحة التالية : 


3 مقط ارلم‎ . Nhl cm1 Mtr Eee erer + (Waring Ofiline] 


HHH 
Fi Ed is Farin Tach. Hale 5 س‎ 
©- #4 A f sie great £ 


[ا الات ا ااا ی ا اا اا E‏ : 


ا > لك ي “ˆ 


2 Th We 


لسع الرر للع ايع شارا القاس 


gl Fy Cmts‏ ا 


بحيث عند النقر على كلمة 00طه۲ يذهب الى صفحة الرئيسية لموقع ۷100 


وع الثقر على كلمة اء اا ارال اا ا 
Web‏ 


وعند النقر على الصورة عء[عهمه6 يذهب الى الصفحة الرئيسية لموقع عءإعمم6 


و عند لفقل لى التيوااتم ااال مشار الا 0 1 ا 
"ع اي ملف صوتي. 


الكو ك 
<html dir=rtl]>‏ 
<head>‏ 
<title>‏ 
صفحتي الاولی 
</title>‏ 
</head>‏ 
<body>‏ 
>font<>/ center>‏ بسم الله الرحمن الرحيم <center><font size=24pt<>‏ 
<br>‏ 
<hr color=red size=10 >‏ 
اهم محركات البحث 
<br>‏ 
<hr width=40% align=right>‏ 
<br>‏ 
<a href=http://www.yahoo.com> Yahoo</a>‏ 
<br>‏ 
<hr width=40% align=right>‏ 
<br>‏ 
<a href=http://www.alltheweb.com> All The Web</a>‏ 
<br>‏ 
<hr width=40% align=right>‏ 
<br>‏ 
<a href=http://www.google.com><img src=google.gifm</a>‏ 
<br>‏ 
<hr color=red size=10 >‏ 
<ه/> استمع لروائع الشيخ مشاري العفاسيı>صalra7man.1m <a hrefbegin‏ 
</body>‏ 
</html>‏ 


شرح الكود: 


<a href=http://www.yahoo.com>Yahoo</a> 


الكلمة التى تظهر فى الشاشة 
E‏ 4 الصفحة المر اد الذهاب ١‏ 
وسوف نقوم بالنقر عليها ا 


<a href=http://www.google.com><img src=google.gif<</a> 


د و الشاشة E TEA‏ 
وسوف نقوم بالنقر عليها (صفحة اخرى) 
رکرو 


حه/> استمع لروائع الشيخ مشاري العفاسيalra7man.rm>þ <a href=begin‏ 


الملف المراد فتحه و تشغيله و هو 


اي ت اا د کال که 
(نص) 


ملاحظات : 

1.حظ ان الكلام (النص) الذي يكون له ارتباط تشعيبي يکون لونه ازرق وتحته خط وعند وضع 
المؤشر عليه يصبح شكل المؤشر على شكل يد. 

2.ولاحظ ان الصورة التي يكون لها ارتباط تشعيبي تحاط بلون ازرق وعند وضع المؤشر عليها 
يصبح شكل المؤشر على شكل يد . 

3. عند زيارة الرابط ( اي عند النقر على الارتباط التشعيبي و العودة الى الصفحة) يصبح لون 
الكلام لون قرمزي كما في الصورة : 

استمع لروائع الشيح مشار ي العفاسى 


وفي حالة الصورة يصبح الخط المحيط بالصورة باللون القرمزي كما في الصورة: 


Google 


4. عند الضخظ على ار اط اروا اال 2 0 0 20 20 0 0 
الرابط يؤدي الى ملف : 


File Download 
Ûo you want to open or saye this file? 


e Nare: begin _alrarman,trn 
| Type: RealPlayer ã2 Lontrol, 1,07 MB 


Fram: LH Documents and Settings ûdministratori Desktop 


N Some files can harm your computer. If the file information abowe 
0 lanks suspicious, or you do not Fully trust the source, do nol open or 
zave his file. How can | decide what sofware ta open? 


ليسالك هل تريد فتح الملف ام حفظه؟ 


نستخدم الوسم نستخدم الوسم <و/><ه> و الصفة hrf‏ مع استخدام شار كما بلي 


وناتي عند المكان الذي نريد الذهاب اليه عند نقر الارتباط التشعيبي 
ونستخدم الوسم <ه/><ج> و الصفة ٥رهم‏ كما يلي : 


<a name =....... Dririrrrrrnrnrnrnrnrn<|/ a> 
# و الاسم الذي يكتب بعد الصفة عصهم يكتب بعد اشارة‎ 
: اليك عزيزي القارئ المثال التالي لتوضيح الامر‎ 
لو ا اتيم نة ترت ت ا هه ا ع‎ 
على اسوالدولة لتقل الى جزء مين من نفس الصفحة تحر الى مط مات اك اة‎ 


سوریا 
فنالا على كلمة (لاردن ننتقل الى ا ٠٨٦‏ 2 ۲ 
IER . TEs‏ 


<a href#j >jدرٹڻلا</a<‎ 
<a href=#p > jنيطuل</a>‎ 
<a href=#i>قارعلl</a>‎ 
<a href=#s>lڍروص</a>‎ 


<و/>معلومات عن الار دname=j>j a‏ < 
وهكذا فانه عند النقر على كلمة الاردن نذهب مباشرة الى الجملة معلومات عن الاردن 


و الان لناخذ مثالا عمليا لتوضيح الامر . 


Cro merme Eiplarer‏ »ار ات 7 چتحاغات 


Fk EF ia Fate Tok Hap j 
1 lA i n Fp reat £ ل‎ a8 
E E e I o Î 3 I= hi xen قا‎ 


سر اط الوحمث الرحم 


Gj oe gl Mi Camis 


3 .ار تات امنالات‎ hr nerme Expire 


Fk E ima Fate Tk Help 
at 2 َ ر‎ arch GF Pecrkan 2 قا < ا ول“‎ i 
2 E [Comes sr Shire pa ibi aor peabop pe hii > + ا‎ E saqî تا‎ 
رو یری یی یی‎ kk ا‎ 
سر تت الامكداق‎ 
١ اساعة‎ ۳ ١١ الأعذ ئي الاعلا‎ 
| 
E] ome lg My Commie 


(حيث ان 2 هي تكملة صفحة 1) وعند الضغط على جملة "تصميم مواقع انترنت" 
نذهب مباشرة الى جملة "مو عد الامتحان". 


٠ الكود‎ 


<html dir=rtl> 

<head> 

<ع][†1)/>اوقات الامتحانات<ع])1{< 
</head>‏ 

<body> 

>centع]<میحرلا />بسم الله الرحمن‎ center> 
<a href= <ھ/>تصميم مواقع انتر نت<ل‎ 


<br><br> <br><br> <br><br><br><br> <br><br> <br><bI> 
<br><br> 

<br><br> <br><br><br><br><br><br> 

<a name=j>jاھتمٺلا /<مو عد‎ a> <br> 

الاحد من الساعة 11 الى الساعة 1 

</body> 

</html> 


ادراج جڌول 
لمعرفة كيف يمكننا ان ندرج جدول يجب علينا ان نفهم الحقائق التالية : 


جدول يبين المادة و سعرها 


عبارة " جدول يبين المادة و سعرها" يسمى تعليق (10امهة٥)‏ 
الصف الذي باللون الاخضر نسميه رأس الجدول (ل4ع]٣‏ م1إطه١)‏ 
الصف الذي باللون الاحمر نسميه جسم الجدول (رله8 عإbاa(‏ 
الصف الذي باللون الازرق نسميه ذيل الجدول ۴٥٥٤٥(‏ مإاab(‏ 
و هذه النقاط ا 0 ا ال ار السا ا 


لعمل الجدول نستخدم الوسم >ع]طtable></tab<‏ 

لعمل جز ء التعليق نستخدم الوم <caption></caption>‏ 
لعمل جزء راس الجدول نستخدم الوسءم <thead></thead>‏ 
لعمل جز ء جسم الجدول نستخدم الوسم <tbody></tbody>‏ 
لعمل جز ء ذيل الجدول نستخدم الوسم <tfoot></tfoot>‏ 
لعمل سطر في أي جز ء نستخدم الوسم <إ)/><إ)> 

لعمل خلية في الراس نستخدم الوسم <ط/><th>‏ 

لعمل خلاية ف الجسم نستخدم الوسم <ل)/><()> 

لعمل خلية في الذيل نستخدم الوسم <طا/><طا> 


raptlon 


VALA Lan 


ملاحظة:يمكن الاستغناء عن عدد من العناصر الاساسية المكونة للجدول (يمكن ان 
يكون الجدول فقط مكون من جز ء الجسم او الراس او الذيل وهكذا...) 


هناك ملاحظة هامة جدا تقول "يعتمد عمل الصفة(ع)uط1إ))ج)‏ على الوسم الذي تسند 
اليه" ومن ره انقرل ف در سا ها ان افد 5 ا > ا 2 
تصبح للجدول كامل و اذا اسندت الى <> فان هذه الصفة تصبح لهذا السطر وهكذ |... 
سيتضح هذا المفهوم باذن الله من خلال الامثلة القادمة. 


الهتمل ومن ثم سوف ننتقل الى مثال اكثر تعقيدا وهكذا ... 


ال 2ا 
لنقم بتصميم الصفحة التالية : 


Pis El view Fakes Tol: Hep 3 
| 2 0 o Th e Fafeuribers f ۴ - M2 ا اسسا‎ 
rere E Ciroka Salinger Omatispl daa, him | " Şar E 


اة پاسساء الماك واسعاآرها 


آقعادة ابعر 


E] Cena Î FF Cera 


الكود: 
لظ الارسمة ا ا 
كل عنصر من عناصر الجدول 
الرئيسية: 
1.التعليق (capi0n(‏ 
2.الراس (head)‏ 
3.الجسم (هط) 
4.الذیل(٤0٥f)‏ 
ولاحظ طريقة عمل الاسطر 
والخلايا في كل قسم 
فهذا المثال يعد تطبيقا مباشر على 
ما تم شرحه 
e‏ 

<table 

border="1"width="1 86"> 


تستخدم الصفة (border)‏ وذلك 
لتحديد سمك اطار الجدول ولو 
اننا لم نكتب هذه الصفة فان 
الهتمل تعتبره صفرا و بالتالي 
يصبح الجدول دون اطار 


تستخدم الصفة (طال1س) وذلك 
لتحديد عرض الجدول 


لاحظ ايضا ان ما يوجد في جز ء 
الراس(لهعط) و جزء الذيل 
)]٥0۲(‏ يعمل له تلقائیا تو سیط 
Cy‏ 
Ek,‏ 
مجموع و 400) 


<html dir=rtl> 
<head> 
<title> 

صفحتي الاولی 
</title>‏ 
</head>‏ 
<body>‏ 


<center><font size=24p{<> بسم الله الرحمن الرحيم‎ >/f0nt<>/center> 


<br> 


<table border="1" width="1 86">‏ 
<صti0oمca/>‏ قائمة باسماء المواد واسعار ھا <م0ناcap>‏ 


<thead> 

<> 
<th>داnلl</th>‎ 
<th> رعuلl</th>‎ 
</tr> 

</thead> 
<tbody> 

<> 

>4< ريصع>/{d<‎ 
<td>100</td> 
</tr> 

<tr> 

<td> jıl</td> 
<td>200</td> 
</tr> 

<> 

>< †/>حليب‎ d< 
<td>100</td> 
</tr> 
</tbody> 
<tfoot> 

<> 


<th>gع‎ ومجمnلl</th>‎ 


<th>400</th> 
</tr> 

</tfoot> 
</table> 
</body> 
</html> 


مثال 13 : 

سوق در د ا اال > O‏ 
على مستوى الجدول كامل وعلى مستوى السطر وحتى على مستوى الخلية . 

وسنتعلم ايضا كيفية التحكم بلون الاطار المحيط بالجدول و ايضا التحكم بارتفاع 
الجدول. 

OE er 


len Hr Cg rer‏ ۔ قط ازل ل 


Fk E ea Fate Ek Hep 8 
۳ 2ا ا‎ 2 ۴ Burch TF Prk 4 ا 72 و"‎ 
kem E Cro eis sd Satlirgg jain sior1peabop predan hii ت ت‎ * Bre 


بسم الله الرحمن الرحيم 


#اتة يسعباع الخرلد ر اسعان عا 


| س ا 


Boome Fy Camis 


ال 


<table border="1" width=" 186" 
align=center height="176" 
bordercolor=red> 


سمك الاطار <-۔۔---e۲‏ 0ط 
عرض الجدول< width-------‏ 
محاذاة الجدول كله< align------‏ 
ارتفاع الجدول< hight-------‏ 
jg‏ الا¦طار bordercolor------>‏ 


<tr align=center> 
align------ < محاذاة السطر‎ 


<td align=center> 
align------- < محاذاة الكلام في الخلية‎ 


لاحظ اذا ان عمل الصفات (attribute)‏ 
بشكل عام يعتمد على الوسم الذي يسند اليه 
ا ف ذا تت ان فة 
(4112) اختلف عملها من حيث المحاذاة 
للجدول او السطر او الخلية وذلك باختلاف 
الوسم الذي اسندت اليه 
(<table>,<tr>,<td>,..)‏ 


ملاحظة:يمكن ان نضع الصفة معااه مع 
<thead>‏ لتصبح المحاذاة لكل جز ء 
head‏ وكذلك الامر مع <b0dyطt>‏ 
لتصبح المحاذاة لجزء رهط كامل و 
كذلك الامرمع <امم)> لتصبح المحاذاة 
لجزء ۴٥٥‏ کامل 


<html dir=rtl]> 
<head> 
<title> 

صفحتي الاولی 
</title>‏ 
</head>‏ 
<body>‏ 


<center><font size=24pt> بسم الله الرحمن الرحڍم‎ >/fon t< >/center> 


<br> 


<table border="1" width="186" align=center height=" 176" 


bordercolor=red> 


<صەنi†مaء/>‏ قائمة باسماء المواد واسعار ها<م0نامca>‏ 


<thead> 

<I> 
<th>aدlnll</th>‎ 
<th> رعسلا</th<‎ 
</tr> 

</thead> 
<tbody> 

<tr align=center> 
>< <4)/>عصیر‎ 
<td>100</td> 
</tr> 

<I> 

<td> jبl</td>‎ 
<td>200</td> 
</tr> 

<> 

<td align=center> ıla</td> 
<td align=center>100</td> 
<> 

</tbody> 

<tfoo> 

<> 
<th< ع‎ ومجملا>/tط<‎ 
<th>400</th> 
<> 

</tfoot> 

</table> 

</body> 

</html> 


و الان قبل ان ننتقل الى مثال اخر » سوف اقوم بتلخيص اهم الصفات لكل وسم من 


اوسمة ادراج الجدول 


<table> 

سمك الاطار< 1.border----------‏ 

عرض الجدول< 2.wWidth-==----‏ 

محاذاة الجدول كله< 3.align------‏ 

ارتفاع الجدول< سسا ر ا 

لون الاطار< 5.bordercolor------‏ 

وضع لون معين كخلفية للجدول< 6.bgcolOor-----------‏ 
وضع صورة كخلفية للجدول< 7.background-------‏ 
<caption>‏ 

محاذاة التعليق (یمین ¢ تو سیط٬یسار‏ »اعلی الجدول»اسفل الجدول)< ےک > 1.align‏ 
محاذاة التعليق العمودية (اعلى الجدول»اسفل الجدول)< 2.Vvalign-------‏ 
<thead>‏ 

محاذاة جز ء الراس كامل < .align---------‏ 1 

وضع لون معين كخلفية لجز ء الراس< 2.bgcolor-------‏ 
<tbody>‏ 

محاذاة جزء الجسم كامل < .align---------‏ 1 

وضع لون معين كخلفية لجز ء الجسم< 2.bgcolor-------‏ 
<tfoot>‏ 

محاذاة جز ء الذيل كامل < .align---------‏ 1 

وضع لون معين كخلفية لجز ء الذيل< 2.bgcolor-------‏ 
a>‏ 

محاذاة للسطر كله< 1.align------‏ 

لون الاطا رالمحيط بالسطر < 2.bordercolOr------‏ 
وضع لون معين كخلفية للسطر< 3.bgeolOr-----------‏ 


<th> ڪs‎ <td> 


عرض الخلية< 1.width-------‏ 

محاذاة الكلام الموجود في الخلية< 2.align------‏ 

ارتفاع الخلية< 3.hight-------‏ 

لون الإطار المحيط بالخلية< 4.bordercolor------‏ 

وضع لون معين كخافية للخلية< 5.bgcolor‏ 

وضع صورة كخلفية للخلية< 6.background-------‏ 

منح الخلية عرض بمقدار عدد معين من الخلايا افقيا (اعمدة)< کے اک ی وک 
منح الخلية ارتفاع بمقدار عدد معين من الخلايا عموديا (اسطر)< 8.TOWSPan--------‏ 


ملاحظة: لرسںهإع)ءهط في كل الحالات يكون بعدها اسم الصورة ولذلك فهي تحتمل 


مثال 14: 
اتی ا : 


Fk EJ ia Fate Tok Help . 


f j Search 7 Fascrkan 47 Bk Oa F- ۳:‏ 2 ك 


: ت + ټ زا الات این ااه الاق ا ی ا ا ا ی ا‎ î 5 sre 


#اتعة يسآ اخراك رأسعان غا 


<html dir=rtl> 2 الکو‎ 


<head> 
<title> 
کے لی‎ ۰ 
</title> انظر الى المتال و‎ 
</head> تمعن بما هو ملون‎ 
<body> باللون الاحمر فهذا‎ 
ف‎ sizع=24‎ p< بسم الله الرحمن الرحیم‎ >/ fon t< >/ center> القذال س‎ 
لما تہ شرحه‎ 
<table border="1" width="280" align=center height="176" > aT 
<caption align= center valign= bottom >l راعسlو قائمة باسماء المواڌد‎ 8 
</caption> ملاحظة:‎ 
<thead bgcolor=green align=right> valign=bottom 
وذلك لجعل التعليق في‎ 
<th ><font size=24pt>دlnll</font></th>‎ . اسفل الجدول‎ 


<th><font size=24pt> jwll</font></th> 
</tr> 

</thead> 

<tbody bgcolor=red align=right> 
<tr > 

<4 < ريیصع>/{d<‎ 

<td> 100</td> 

</tr> 

<r > 

<td >jùبl</td>‎ 

<td >200</td> 

</tr> 

<> 

<td <بيلح>/†d<‎ 

<td >100</td> 

</tr> 

</tbody> 

<tfoot bgcolor=blue align=right> 
<I> 

<th>gع‎ gaجnلl</th>‎ 

<th>400</th> 

</tr> 

</tfoot> 

</table> 

</body> 

</html> 


مثال 15 : 
لنقم بذ اة لصفحة التالية ٠‏ 


۰ 
5 


ا 


Nhl ln Mrmr Exp lere E‏ - عقو اآرلم ل 


Fl EE ia Fale Tok Help 
ك‎ A 8 i NT ا‎ 

f e e 0 ` 3 > e`‏ )| ا ی ا 
re‏ * ا e) RO pis srl Skiregg phir sior 1ekop pmesdea, hiail » EI‏ . 


سم اله ترخس لخم 


اة وسا الود ر لسعان عا 


BÎ ore gl My Camis 


<html dir=rtl> 

<head> 

<title> 

صفحتي الاولی 

</title> 

</head> 

<body> 

<center><font size=24pt<> بسم الله الرحمن الرحيم‎ >/ font >/center> 
<br> 

<table border="1" width="280" align=center height="176" 
bgcolor="green" > 

<caption align= center valign= top >l راعسly قائمة باسماء المواد‎ </capti0صn<‎ 
<thead > 

<I> 

<th >öدlnll</th>‎ 

<th> رعuلا</th>‎ 

</tr> 

</thead> 

<tbody > 

<I> 

<td width=500 height=1 00> رıږe</td>‎ 
<td>100</td> 

</tr> 

<r > 

<td >jùıl</td> 

<td >200</td> 

</tr> 

<I> 

<td ><بيلح>/td<‎ 

<td >100</td> 

</tr> 

</tbody> 

</table> 

</body> 

</html> 


لاحظ ان الجدول في هذا المثال يتكون فقط من جزئي الراس والجسم (تم اهمال جزء 
الذيل) و كما قلنا سابقا انه يصح ذلك . 

تمعن ما هو ملون بالاحمر ولاحظ ما ياتي: 

valign=top $6 

لجعل التعليق في اعلى الجدول 

width=500 $6 

لتحديد عرض الخلية. ولاحظ انه بتغير عرض الخلية تغير عرض الخلايا التي تقع في 
نفس عمود هذه الخلية. 

height=100 6® 

لتحديد ارتفاع الخلية . 

ولاحظ انه بتغير ارتفاع الخلية يتغير ارتفاع الخلايا التي تقع في نفس سطر هذه الخلية . 


مثال 16 : 
لق ا 


hern Hr E erer 1 [Wering DINI me]‏ - حقو الم ا 


A A û Pa fre O 2-b A- TE‏ - 9 د 
TT EET = E3 * Be‏ 


سباع لقحصضرآثه 


<html dir=rtl> 

<head> 

<title> 

</title> 

</head> 

<body> 

<center><font size=24p{< بسم الله الرحمن الرحيم‎ >/f0nt<>/center> 
<br> 

<table border="1" width="280" align=right height="176" background="Coffee 
Bean.bmp" > 

<caption align= center valign= top >l راaسly قائمة باسماء المواد‎ >/capti0ص<‎ 
<thead > 

<I> 

<th ><font size=1 8pt color=white>sدlnll</font></th>‎ 
<th><font size=1 8pt color=white> yull</font></th> 
</tr> 

</thead> 

<tbody > 

<> 

<td ><font size=18pt color=white> رıصe</fonP‎ </td> 
<td><font size=18pt color=white>100</fontb </td> 
</tr> 

<r > 

<td ><font size=18pt color=white>jyl</font></td> 
<td ><font size=18pt color=white>200</fontm</td> 
</> 

</tbody> 

</table> 

لجرل الاه 

<table border="10" width="280" align=center height="1 76"> 
<caption align=center> ٽتlصصخغتلl‎ «lawl </caption> 
<thead> 

<tr bgcolor=blue> 

<ط†/>كلية العلوم وتكنولوجيا المعلومات<۸=4همءاهء 1> 

</tr> 

</thead> 

<tbody > 

<tr bgcolor=green bordercolor=red> 

<ل/>هندسة البر مجياٽت>rowspan=2 <td‏ 

<ل)/>نظم معلومات حاسو بية<0WSp21=2] >d‏ 

<td rowspan=2>بوسlحlا‎ ple</td> 

</tr> 

</tbody></table> 

</body> 

</html> 


تمعن جيدا في الصفحة التي نريد تصميمها وفي الكود الازم لعمل ذلك ولاحظ ما يأتي: 


> RC 

مايوضع بين --!إ> وبين < تعتبر تعليق ولا تؤثر نهائيا في عملية التصميم 

colspan=4 6 

وذلك لجعل الخلية بمقدار اربع خلايا افقيا (بمقدار اربع اعمدة) 

bordercolor=red 6® 

لجعل لون الاطار المحيط بالسطر باللون الاحمر 

(تمكن ماد هظة ذلك اذا١كير‏ ت الصور هار اذا 0 ا 1 2 0 
rowspan=2 $‏ 

وذلك لجعل الخلية بمقدار خليتين عموديا (بمقدار سطرين ) 


En Mer Ere erer + Warhing Olin]‏ ۔ مقطو ارلے ا 


Fk E vier Fetes Tok Help 
مسد اسر و آ8ا‎ î arana ع‎ - EE چ‎ iil 


sı Cro meris and SE ikir iar {pestip ede 


قاثفة ياسسات افتيو لن و لسار ها 


gl My Camis 


<html dir=rtl> 

<head> 

<title> 

اا 

</title> 

</head> 

<body> 

<center><font size=24p{<> بسم الله الرحمن الرحيم‎ >/f0nt<>/center> 
<br> 

<table border="1" width="280" align=right height="176" > 
<caption align= center valign= top >l راعسly قائمة باسماء المواد‎ </captioصn<‎ 
<thead > 

<r > 

<th bgcolor=red><font size=18pt >öدlnll</font></th>‎ 

<th bgcolor=blue><font size=1 8pt > ull</font></th> 

<> 


</thead> 

<tbody > 

<> 

<td background="Coffee Bean.bmp"><font size=18pt 
color=white> رıصe</‎ font </td> 

<td bordercolor=green><font size=18pt >100</fontm </td> 
</tr> 


<I> 

<td background="Coffee Bean.bmp"><font size=18pt color=white 
>jıl</font></td> 

<td bordercolor=green><font size=18pt >200</fontm</td> 

</tr> 

</tbody> 

</table> 

</body> 

</html> 


تمعن جيدا بما هو ملون بالاحمر فهذا المتال تطبيق مباشر لما تم شرحه 
(ملاحظة : ١٤٥إع ٠۲٠١10۲‏ 0۲ط قد لا تلاحظ ان حدود الخلية اصبح باللون الاخضر 
ال اذا ترتكير الصو اورت ليق الل ٠‏ 1 دا 


وبهذا المثال عزيزي القارئ نكون قد طرحنا امثلة كافية باذن الله على موضوع ادراج 


سابقا. 


عندما نقول اننا نريد تغير خلفية الصفحة فاننا بالحقيقة نريد تغير خلفية جزء الجسم 
(رلهط) من صفحة الانترنت » وبالتالي لعمل ذلك نستخدم الصفتين 
<body> pwgll ga bgcolor,background‏ . 


bgcolor‏ ----------> لتحديد لون يكون خلفية للصفحة ويكون تحديد اللون اما بالاسم 
او برقمه مسبوقا بالاشارة # 

<body bgcolor=red> : مڌ‎ 

<body bgcolor=#648fd1> 


background‏ ----- > لتحديد صورة لتكون خلفية للصورة وياتي بعد هذه الصفة اسم 
الصورة وبذلك فان هذه الصفحة احتمل جميع حالات اننم سے ا ری زین ادر اج 
الصور. 


<body background=renaldo.gif> : مڌ‎ 
<body background=http:/www.stars4arab.net/uplo/w.gif> 


Nhl cmsp1 Mrmr Crp erer + [Werhing Offline]‏ - صقت الم ا 
Fk EJ sima Fate Tok Help Fg‏ 


= O- BB Û Pe gre @| 2- a 
a e 38 ona anal Satire jpirdariirîy sior Deabap edem ت‎ B= nia * gre 


r ll My Comte 


<html dir=rtl> 

<head> 

<title> 

</title> 

</head> 

<body bgcolor=#648fd1> 

<center><font size=24pt<> بسم الله الرحمن الرحڍم‎ >/ fon t< >/center> 
<br> 

<اf0n/>أهلا‏ وسهلا بكم في مو قعي >f01† 81ze=24 p<‏ 
</body>‏ 

</html> 


Nhl Lm Mrmr Er erer + [Waring OfNTimıe]‏ - حفط الم ل3 
Rk EM tea Fate Tok Hyp‏ 


a‏ 3 8 © و د ت ھا فا 


I= * xer‏ ع لا الات ین اه الاق ا ری اا ا ا ا ا 


هلا وسهلا بكم في موقعي 


ê] ome gl Fy Camis 


<html dir=rtl> 
<head> 

1 : 
<title> 2‏ 
صفحتي الاو لی 
</title>‏ 


</head> 


<body background=bg.jpg> 

<center><font size=24pt<> بسم الله الرحمن الرحڍم‎ >/ fon t< >/center> 
<br> 

<اf0n/>أهلا‏ وسهلا بكم في مو قعي <foIt S1Z0=24 p<‏ 

</body> 

</html> 


ملاحظة : الصورة في المتال تم معالجتها ببرنامج معالجة صور وذلك لتخفيف التباين 
حتى يصبح الكلام في الصفحة المراد تصميمها واضحا. 

ايضا الصورة كبيرة الحجم ولذلك فانها ملأت الصفحة كاملة لكن لو كانت الصورة 
صغيرة فان تكرارا في الصورة سوف يحدث حتى يقوم بملئ كامل الصفحة ويمكن حلها 
عن طرية كا لكي رالتى رن ا اج ل ي 


® 
® 
e 
e 


حيث استخدمنا لعمل الخلفية الصورة التالية ' 


ادراج قائمة 
هناك نوعين من القوائم : المرتبة وغير المرتبة 


القوائم المرتبة : 

وهي القوائم التي تعمل باستخدام الارقام (1,2,3,4) او الاحرف الانجليزية 
الكبيرة(5, (۸,8,٤٥‏ او الاحرف الانجليزية الصغيرة (a,b,c,d)‏ او الارقام اليونانية 
الكبيرة (1,11,111,1۷,۷) او الارقام اليونانية الصغيرة(1,11,111,1۷,۷).والقيمة 
الافتراضية هنا هي الارقام . 

لعمل هذا النوع من القوائم نستخدم الوسم <[م> مع الوسم <1> » 1م اختصار 

: (قائمة مرتبة) و 11 اختصار و1[1(قائمة)» كما يلي‎ ordered is 


<ol> 
أ‎ </li> ما بين <1> وبين <ا/> هو‎ 
</li> E 
: في توضیحنا هذا یکون لدینا‎ OEE OE 
</I> اربع تقاط‎ E 
EO KM aT e nT 


لتحديد نو ع القائمة وهي هنا قائمة مرتبة فما 
يو جد بین <0> وبين <اه/> هو عبارة عن 
قائمة مرتبة 


ولاستخدام الانواع الاخر امن هاري ل 0 لارا 0 ا ا 
مع احدى القيم التالية: 


A‏ -----------> اذا اردنا القائمة من نوع الاحرف الانجليزية الكبيرة 
a‏ ------------> اذا اردنا القائمة من نوع الاحرف الانجليزية الصغيرة 
I‏ إا اردتا القائمة من نو ع الا قاع اليو نان الكدرة 

1 -----------> اذا اردنا القائمة من نوع الارقام اليونانية الصغيرة 


<ol type=A>: مثں‎ 

ll > 
eT 
</ol> 


PIPPIN IN 


القوائم غير المرتبة 

وهي القوائم التي تعمل باستخدام احدى الاشكال التالية : 

a ' 

)٩ ۾٣‎ ۵( مربع‎ > 6 

° -۔۔۔۔----> دائرة(ع[عc1۲)‏ 

والقيمة الافتراضية هنا هي وال . 

ا النوع من القوائم نستخدم الوسم <انا> مع الوسم ul < <li>‏ اختصار 
unordered ist‏ (قائمة غير مرتبة) و 11 اختصار 1و1[(قائمة)» كما يلي : 


<ul> 
<li> </li> مابین <1> وبين <زا/> هو‎ 

٣ i نقطة واحدة من القائمة و بالتالي‎ 
و‎ hci Eme, LE 
e i, yy “aE Ee 
<li> ei TT GT WSO SëgÈڇ‎ sS 


لتحديد نو ع القائمة وهي هنا قائمة غير مرتبة 
فما يوجد بين <ان> وبين <آن/> هو عبارة 
عن قائمة غير مرتبة 


ولاستخدام الانواع الاخرى من هذا النوع من القوائم (غير القرص )نستخدم الصفة 
type‏ مع احدی القيم التالية: 


square‏ ------د-> اذا اردنا القائمة من نوع المربع 
circle‏ ---------> اردنا القائمة من نوع الدائرة 


<ol type=square>: ûn 

6 > > 
e 
</ol > 


3 قط ارم‎ - Nhl cng Mr Exp erer + [Working Oi me] 
Fk EF tea Fate: ok Hyp 


5 آ2ا‎ 0 j search 7 Paverhan fF - A e i 


EC mmenis srd Stings pii ahr lpebop een, hil 


1 كلب الطرم رار جا المطرملت 
2 رة نة 
3 ية الل 
ك وة الادني 


لاحظ انه لاحاجة 
ا استخدام <br>‏ 
عند عمل القوائم 
فالقوائم تعمل لنفسها 
فقرة خاصة بها 


ولاحظ ان عبارة " 
تحتوي الجامعة على 
عدد من الكليات 
a‏ أیست مرقمة 
لانها ليست ضمن 
g <li>‏ >/< 


Ej oore 


<html dir=rtl> 

<head> 

<title> 

</title> 

</head> 

<body > 

<center><font size=24pt<> بسم الله الرحمن الرحڍم‎ >/ font >/center> 
تحتوي الجامعة على عدد من الكليات هي <آ0>‎ 
>1< <1/>كلية العلوم وتكنولوجيا المعلومات‎ 
<1/>كلية الهندسة<1]>‎ 

<1/>كلية الصيدلة<ز]> 

<11/>كلية الادابح][> 

</ol> 

</body> 

</html> 


3 قط ارم‎ - Nhl cng Mr Exp erer + [Working Oi me] 
Fk E isa Fate Tok Helge Fr 


e @ i 
) BE Û Pe frn © 2-b 3-a 
E Û Rummy snd Seihirege pia iliy air Dedkop pêa, hail e ت‎ * Bize 


ترس الباععة على جد عن یلت کي 
+ كلب انطرم وقرف يا المطر مات 
+ رة نة 
۾ ية اسل 
۽ وة الادلي 


gl Hy Cots‏ ا 


<html dir=rtl> 

<head> 

<title> 

</title> 

</head> 

<body > 

<center><font size=24pt<> بسم الله الرحمن الرحڍم‎ >/ font >/center> 
تحتوي الجامعة على عدد من الكليات هي <آں>‎ 
>]1< <[1/>كلية العلوم وتكنولوجيا المعلومات‎ 
<1/>كلية الهندسة<1]>‎ 

<ز1/>كلية الصيدلة < ]> 

<11/>كلية الادابح][> 

</ul> 

</body> 

</html> 


و يمكن ان تكون القائمة خليطا ما بين النوعين المرتب و غير المرتب كما في 
المثال التالي: 


مثال 22: 


3 قط ارم‎ - Nhl cng Mr Exp erer + [Working Oi me] 


i seyî‏ * ت اه 


شعتري الجامعة على صد من اكليات هي 
كلة انرم برارفر يا لطر سات 
نة البرعمزاتا 
تل عرب 
« قلقم مطرناث عافريية 
ية اليس 
تاي الصميااة 
عة الاداي 


Fk EF tea Fate: ok Hyp 
Bd A Û Pe frm © 2-b 3-i E 
E E E e I e 


<html dir=rtl> 

<head> 

<title> 

صفحتي الاو لئ 

<l/title> 

</head> 

<body > 

<center><font size=24pt<> بسم الله الرحمن الرحيم‎ >/ fon t< >/center> 
تحتوي الجامعة على عدد من الكليات هي <1=عمر) إاه>‎ 
>] <1/>كلية العلوم وتكنولوجيا المعلومات‎ 
<ul type=square> 

<[[/>هندسة البر مجيات <][> 

<1/>علم الحاسوب <1[> 

<إ1/>نظم معلومات حاسوبية<]> 

</ul> 

<1/>كلية الهندسة <1> 

خز[/>كلية الصيدلة ح1 

<ز[/>كلية الادابحز[> 

</ol> 

</body> 

</html> 


تقسيم الشاشة 
(استخدام ۷ال و (sa۸‏ 


Tc O O O a مع‎ 


الكثير من الخصائص . 

ولعمل ذلك نستخدم الوسم <رإل> او الوسم <مهموء> و الفرق بينهما كما يلي : 
<span> <div>‏ 

يعمل فقط على E,‏ 

Microsoft internet explorer Microsoft internet explorer 

Netscape Jآذİg‎ 

.innerHTML ماIدختسا لا يمن‎ .inner HTML ماIدختسا يمكن‎ 

(فياكالة استخةاءالعة ر مجة مال الجافا | حا ا ا ا 

سکریبت) سکریبت) 


اذا لاحظ ان الفرق بينهما لا يهمنا هنا كثيرا وانما هو من مبدأً العلم بالشئ 
*هنا سوف نقوم باستخدام الوسم الاول <۷إل> * 


ا ایہم هر: 


<dÎVZ> rrr rrrrrs </div> 


سنقوم الان بضرب مٹال بسیط حتی نفهم اکثر استخدام هذا الوسم اما الامثلة الاكثر 
تعقیدا فسوف تضرب عند شر ج 88 . 


3 قط ارم‎ - Nhl cng Mr Exp erer + [Working Oi me] 
Fk EF tea Fate: ok Hyp 


Bd A Û Pe frm © 2-b 3-i 


2 E E E e I e دتا ب‎ ٣ E xerî قا‎ 


عالم السيارات 


align=center 
محاذاة ال ۷ل في‎ 
ا‎ 


1d=div1 

اعطاءِ اسم ل إل 
o NE.‏ 
كتابة اي اسم نريد 


لاحظ ان ال بال 
يكون لنفسه فقرة 
خاصة به فلا يحتاج 
الى <إb>‏ 


لو تم استخدام span‏ 
بدلا من ۷ال ستظهر 
۰ اأنتب : 1 


<html dir=rtl> 

<head> 

<title> 

صفحتي الاولی 

</title> 

</head> 

<body > 

بسم الله الرحمن الرحيم <center><font size=20pt<>‏ 
</fontm</center>‏ 

<font size=20pt<pكڊ‎ Igy Iaİ</font> 
<div align=center 1d=div1> 

<font size=20pt><ٽlا السار‎ مlle</font>‎ 
</div> 

</body> 

</html> 


مثال 24 

i‏ اا ورا ی ا 
الرئيسية " وهي تحتوي على ارتباط تشعيبي للصفحتين الاخريتين. 

اسهد اي ا ت ,ا 

و رونو انها درا فی تیم را ی ی ت 
aA aE FE ET 0‏ 
طبعا ھا سے عا ال ادرا الللاكا ر الا 0 5 
نبدا بالعمل .. 


الصفحة الاولى (ص٤.الرئيسية):‏ 


J þrrosa [ner nrt Esp oer‏ » الصلفحا الرئيسياً ل 
Fk EJ tea Fatt êk Help E7‏ 


0 0-E ر ن‎ 0 8 CT 


aî ws 3E اتا ا‎ sral Satine pedariiriy arp e رت21‎ » B= nis * rer 


<html dir=rtl> 

<head> 

<ع[ا1)/>الصفحة الرئيسية<ع])ا> 

</head> 

<body bgcolor= #009933> 

<center> 

<font size=]1 8pt<دllخ‎ دnn</font>‎ 

</center> 

<ul> 

<1 /><و/>السير ة الذاتية حرط السير ٥=‏ ]1 ۾><i[>‏ 
<ز1/><ه/>درس في تصميم المو اقع <1 .التصمیم = ع۲ ۾><¡[> 
</ul>‏ 

للاتصال بنا 

<a href=mailto:moh khalid @yahoo.com>moh_ khalid @yahoo.com</a> 
</body> 

</html> 


moh khalid @yahoo.com 
يفتح لنا البرنامج الافتراضي لتحرير الاميلات و عند كلمة 10 يكتب‎ 
: كما في الصورة‎ صm0h_‎ khalid @ yahoo.com 

BS New Message - 8K 


: Fila Edit Yiew Insert Format Tools Message Help î 


db 8 €‏ ا 


Send 3 1 Paste 1 heck 


BH To: mah khaldgğyahoo,com 
Lc! 
Subject: 


الصفحة الثانية (۳ط.السیر 6: 


NE‏ ع irre nl n1 Erplurr‏ , السيرة الفاقية ل 


Fl E ma Furia Tash Hale 
ê E û Os fre © A- A-A + 


E j Co ris sr Shires piniya pîy Dormer? pRB hi a I= F Bre 


رة اة 
الآسم: سحسمد خالكة 
ا 
العمل :محال نظم 


معرئات للبت اة 


E 
ES 
3 


السدة ال ية 


Gj oe gl My Commits 


لاحظ ان الصورة الواحدة من الصور الموجودة في هذه الصفحة(صورة شعار Yahoo‏ 
وشعار مإعمم و شعار N١؟M)‏ هي عبارة عن صورة موجودة ضمن خلية ضمن 
جدو لو ايضا ان هذا e a 1 1e‏ 


و قد تم تلوين جزء الكود الذي يؤدي هذه الوظيفة تمعن به جيدا فما هو الى خليط من 
الوسم <td>‏ لادراج الخلية والوسم <img>‏ وچ الصورة والوسم <a href...>‏ 
لد ارتباط د تشعيبي . 


<tbody> 

<> 

<td bgcolor=#009933>Yahoo</td> 
<td><a href=http://www.yahoo.com> 
<img src=img/yahoo.gif width=" 124" 
height="58" ></a></td> 

</tr> 

<I> 

<td bgcolor=#009933>Google</td> 
<td><a href=http://www.google.com> 
<img src=img/google.gif width="124" 
height="58" ></a></td> 

</tr> 

<I> 

<td bgcolor=#009933>MSN</td> 
<td><a href=http://www.msn.com><img 
src=img/msn. gif width=" 124" 
height="58" ></a></td> 

</tr> 

</tbody> 

</table> 

</div> 

</center> 

<و/>الصفحة الرئيسية<م.ط. الرئيسية ع۲ 4> 
</body>‏ 

</html> 


<html dir=rtl> 

<head> 

<ع]t1)/>السيرة‏ الذاتية<ع])])> 

</head> 

<body background=img/bg.bmp> 
<center> 

<font size=1 8pt<يتاذلا />السيرة‎ fon 
</center> 

<div> 

<font color=red> 

<h2> 

</h2> 

<h2> 

العمر:20سنة 

</h2> 

<h2> 

العمل: محلل نظم 

</h2> 

</font> 


<table border=1 height="140" width="154"> 


>caمان0مم<ةلضفملا البحث‎ تاكرحم>/capti0n<‎ 
<thead bgcolor=#33CCFF> 
<I> 

<th> 

الموقع 

</th> 

<th> 

ھا 

</th> 

</tr> 

</thead> 


3 C: Hace nls axl Soltis dminiratuiNy Dor umetnês urn? kral him» Micrusuft ltt Exglerer e ا‎ 


Fils EA i Faria Tal Hales F 
ر ای‎ ٠ و س و اعا ا‎ 9 2 8 
1ii ECO menis srd Settings pain aio py Dormer pe R4 Lago, hira 2 EI nl * girer 


یمان کم هلا درن ای دين الین هدا 


1 تمسير لعرقع 
رمج ار لع 


3 


HIML 

هي عبار ة عن اة سهاا جا لتصميم مواقع الامترنت وسوق تقوم يشر السيد من السليات اي يكن اجراجدا بهاء نة 
قاتواج الجدلول وافراج الارقياطات الندسبيرادراج الصرد و انكر اشير 

فكت لقم الله ينبل ليسي في نة الم عي 

الازسسياة 


"لفان 
2 
الكروقا الشاصته 
تانطاقك دة الاقعماد الثلادة نانك القناء تنسمنه فلكت ٠‏ م سحلت الائ فت 8 * 
Ej one gl e Commis‏ 
| ك EC Hace rls ool Sel tirsi dini rirato ily Dot umet ns rm TA kaa birm * Micrsufl ilirart Cig lerr‏ 
erer FF‏ م Fl ERE ina Eira Tal Ha a‏ 
3-a A‏ 2 © س س ر ےا ا ٠‏ ل ا 


aiken ECan Satire pia ikir atopy Do reerkr pe E ago, hira ت‎ E] لا‎ 2 E E 


وهي عبار عن لقا سطووة سخ لق الچتمل ا لن فشاك فروی رتیسپیة سرف ینم تنهار ٠‏ وئپپانچا فما بد 


Java Saipî 

وهي لغ برميا سيل جدا تشي في بناتها لغ لجالا و السي وهي نمطا من القيام بالحرنة والميلاميا ال سط الإتثرلت 
النهام القاصة قك الفا من صاكخية ال طوعات شي عوذج عا 

و بتطما لذا الل السبيلة ييح باملالثا الليام يامو ضيه الجمال ولرد لوطا 


VE soripî 
وهي لبضا لغ برمجة سهة جدا كن بنيتها الرليمعية تبه لق اليجوال يسك‎ 
وشي تشب بصلها عسل الجا سلريبت‎ 


<html dir=rtl> 
<head> 
<title></title> 
</head> 
<body bgcolor=#648fd1> 
<center> 
<font size=1 8pt<عقا و برمجة المو‎ ميمصن>/f0nا<‎ 
</center> 
<br> 
<م/> يمكن تقسيم هذا الدرس الى قسمين اساسين هما<م>‎ 
<0> 
>1< <ا/>تصمیم المو اقع‎ 
<ul type=square> 
<a href=#h><li>HTML</li></a> 
<a href=#x><liÞXHTML</li></a> 
</ul> 
>1< <11/>برمجة المواقع‎ 
<ul type=square> 
<a href=#j><li>Java Script</1i></a> 
<a href=#v><li> VB script</l11></a> 
</ul> 
</ol> 
<h3> 
<hr align=center width=50% color=red> 
<a name=h>HTML</a> 
<br> 
هي عبارة عن لغة سهلة جدا لتصميم مواقع الانترنت وسوف نقوم بشرح العديد من العمليات التي يمكن اجراءها بهذه‎ 
اللغة‎ 
<br> 
كادراج الجداول وادراج الارتباطات التشعيبيةوادراج الصور والكثير الكثير‎ 
<br> 
يمكن تقسيم اللغة بشكل رئيسي الى ثلاثة اقسام هي‎ 
<br> 
اوس‎ 
<br> 
الصفات‎ 
<br> 
الخرو ت ااخاة‎ 
<br> 
وباتقانك هذه الاقسام الثلاثة يمكنك القيام بتصميم الكثير من صفحات الانترنت‎ 
<br> 


وهذ توضيح بسيط لثلاث اقسام 
<br>‏ 
الاوسمة.1 
<br>‏ 
اوسمة للقيام بوظائف معينة مثل تو سيط الكلام > جعل الخط مائلاء جعل الخط غامقاء...الخ 
<br>‏ 
وهي تقسم بدورها الى 
<br>‏ 
Main Tags‏ 
<br>‏ 
Tags‏ 
<br>‏ 
Attribute‏ .2 
<br>‏ 
Special Character‏ .3 
<br>‏ 
<hr align=center width=50% color=red>‏ 
<a name=x>XHTML</a>‏ 
<br>‏ 
وهي عبارة عن لغة مطورة من لغة الهتمل الا ان هناك فروق رئيسيية سوف يتم اظهاره وتبيانها فيما بعد 
<br>‏ 
<hr align=center width=50% color=red>‏ 
<a name=j>Java Script</a>‏ 
<br>‏ 
وهي لغة برمجة سهلة جدا تشبه في بنائها لغة الجافا و السي وهي تمكننا من القيام بالحركة والدينامكية الى 
صفحة الانترنت 
<br>‏ 
المهام الخاصة مثلا التاكد من صلاحية المعلومات في نموذج ما 
<br>‏ 
و بتعلمنا هذا اللغة السهلة يصبح بامكاننا القيام بامور تضيف الجمال والقوة لموقعنا 
<br>‏ 
<hr align=center width=50% color=red>‏ 
<a name=v> VB script</a>‏ 
<br>‏ 
وهي ايضا لغة برمجة سهلة جدا لكن بنيتها الرئيسية تشبه لغة الفيجوال بيسك 
<br>‏ 
وهي تشبه بعملها عمل الجافا سكريبت 
<hr align=center width=50% color=red>‏ 
</h3>‏ 
<ه/>الصفحة الرئيسية<ممط.الرئيسية؟ ع۲ ۾> 
</body>‏ 
</html>‏ 


لاحظ ان في هذه الصفحة ارتباطات تشعيبية على فقرات معينة من نفس الصفحة و هذه 
الارتباطات أتية على شكل قائمة وقد تم تميز ذلك بتلوينه باللونين الاحمر والازرق. 


ملاحظة. 

هذا المثال لا يعتبر صحيحا من ناحية التصميم فمن اهم قواعد التصميم "الثبات في 
التصميم" يعني متلا الثبات بالوان او صور الخلفيات لجميع الصفحات والى ذلك من 
الامور التي يجب الثبات فيها . 


ادراج اطار 
(frame)‏ 


BB BIN prevêrw 1 Hir raul Înêer nirî Explorer 
Fk EJ siea Fate; otk Hap 


O=- ©0 BE O Pe frm © 2-b 3 - w- 


BMW 


Elm yl Fy Cmts 
ففي هذه الصورة يوجد ثلاث صفحات (جزئية)-كما هي مرقمة في الصورة-مفتوحة في‎ 
نفس الصفحة (الكلية)‎ 


نحتاج الى عمل اطارات (عمصmهf۲)‏ في الصفحة الكلية و كل صفحة جزئية سوف تكون 
في اطار معين ويجب قبل ذلك ان نحدد هل نريد ان تكون الاطارات بشكل افقي او 
عمودي . 


في لغة الهتمل يتم عمل ذلك عن طريق الوسم ۲> والذي یحدد اما ان تکون 
الاطارات بشكل افقي فنستخدم الصفة ی سمع او بشكل عمودي فنستخدم الصفة وإمع 
ومن ثم نستخدم الوسم <ع_هf۲>‏ لعمل اطار و لنحدد الصفحة الافتراضية التي سوف 
قظهر فی هذا الاطار عن طريق الصفة ]ي (كما في حالة ادراج الصور)»› کل هذا 
سوف يكون في الصفحة الكلية والتي يجب ان لا تحتوي على جز ء الجسم (<رلها>) 


وحتى لا تتشابك الامور مع بعضها ناخذ الان المثال التالي : 


مثال 25: 

اعتمادا على الصفحات التي تم تصميمها في مثال 24 وهي : 

ةيسيئرلا.ط»n‎ 

ميیمصتلا.ط1n‎ 

ةریسلا.ط1m‎ 

سوف نقوم بتصميم صفحة اسمها ( ط.اطار) والتي يظهر فيهما الصفحتين 
صاط.الرئيسية و ص)ط.التصميم كما في الصورة: 


dh hb , Mirra lrrnrt Erplarrr | 
Fl EE ie Fate: Tk Hap E 
3 0 E م و‎ pe © 8 3 e` 


xı EC oo ens snd Setting iit ai, Docireerkr jer2 yea Fil e ا ت‎ * ge 
5 


BÎ me yl My Cumier 


<html dir=rtl> 
<head> 
<title> 

الاطار 

<i/title> 


</head> 

<frameset cols=20%,*> 
<frame sıc=ةږıأرلا.htm>‎ 
<frame src=pڍnصڀتll‎ .htm> 
</frameset> 

</html> 


شرح الكود : 
لاحظ او لا انه لا يوجد جز ء الجسم <رلهط> . 


<frameset cols=20%,*> | aA </frameset> jug <frameset> jı la 
عبارة عن مجموعة من الاطارات (عدصه۲؟)‎ 


: cols=20%,* 
</frameset> لعمل الاطارات بشكل عامودي حيث ان حصة‎ 
) الثاني هي ماإتبقى (اي 80 بالمئة‎ 


<frame Ss1c-=ةږıئرلا.htna>‎ 
TOE oc RT IG 


<frame src=pڍnصڀتلl.htm>‎ 


متال 26 : 
عدل على كود مثال 25 لتصبح الشاشة كما يلي : 


E: 


a ,ار‎ hene) El [kire 


E 8‏ و 9 و ر ن ک وا ي ٠‏ دی 


seke TC oraneris snd stinger stor, Docent 2uye Hil Es ne * ren 


<html dir=rtl> 
<head> 
<title> 

الاطار 

</title> 
</head> 


<frameset rows=20%,*> 
<frame srec=ةyږıئرلا.htm>‎ 
<frame src=pڍınصڀتl‎ .htm> 
</frameset> 

</html> 


لاحظ اننا فقط استبدلنا الصفة وإمع بالصفة حتی تصبح الاإطارات افقية . 


مال 27 
اعتمادا علی مثال 24 عدل علی کود مثال 5 لتصبح الشاشة كما يلي : 


dh hi , Mirrseft llrrnrt Erp larrr 


Fk EJ ‘ina Fate; Tok Hap 


0 و د ت ےا و ت‎ 9 8 E e8 


اذا 


في هذا المثال لاحظ اننا قمنا بعمل اطارات بشكل عمودي 
وبشكل افقي معا . 
بداية تم تقسيم الشاشة الى اطارين عمودين من خلال السطر 
<frameset cols=20%,*>‏ 
ومن تم تكوين الاطار الاول من خلال السطر 
<frame sإec=ةيږıأرلا .htm>‏ 
و من ثم تقسيم الاطار الثاني العمودي الى اطارين افقين من 
ل :ل 
<frameset rows=40%,*>‏ 
ومن ثم عمل الاطار الافقي الاول والثاني من خلال السطرين 
>ll.htmتڀصnڍsrc=p <frame‏ 
htm>‏ .سير <frame src=‏ 
ومن اغد ون عل ا و 
</frameset>‏ 
راخ ا اغات امل اطا ا عمو ية 
</frameset>‏ 


ties Ecos sd Setting jini airy Docent 2res Hil 


<html dir=rtl]> 

<head> 

<title> 

الاطار 

</title> 

</head> 

<frameset cols=20%,*> 
<frame sıc=ۀيسيئرلا.‎ ht m< 


<frameset rows=40%,*> 
<frame s۲!c=ميanصتلا.htm>‎ 
<frame src= ريسûا.htm>‎ 
</frameset> 


</frameset> 
</html> 


O I pgالاو‎ 


dd hi , Mirrmoft llemnrt Erp lartr 
Fk EJ ima False Tok Help ¥ 


0 © و د ن کا ا‎ 9 8 E e 


BÎ me ll my Compute 


بحيث عندما ذضخط على الارتباط التشعيبي "السيرة الذاتية" تفتح لنا صفحة السيرة 
ا الاطار رقم 2 وكذلك الامر عند الضغط على الارتباط التشعيبي "درس في 
تصميم المواقع " تفتح لنا صفحة تصميم وبرمجة المواقع في الاطار رقم 2 . 


لعمل مثل ذلك نستخدم صفة جديدة عند كل تحديد اطار وهي ع٠‏ هم اي بمعنى اخر 
کک کی کک ا 

وايضا نقوم باستخدام صفة ا ا 
اسم الاطار الذي سوف يفتح به الصفحة التي لها ارتباط تد تشعيبي اي نحدد الاطار الهدف 
ولعل المتال القادم سيوضح الامور بشكل اكبر. 


متال 28: 
اعتمادا عل 0 اة ا E‏ 


الكود: 
اولا : نقوم بكتابة الكود التالي لصفحة ط.اطار(الصفحة الكلية) 


<html dir=rtl> 
<head> 
<title> 

الاطار 

</title> 
</head> 


<frameset cols=20%,*> 

<frame src=yuuئرll.htm‎ name=content> 
<frame src=pڍnصڀتll‎ htm name=main> 
</frameset> 

</html> 


ثانيا : نقوم بالتعديل على كود صفحة . الرئيسية كما يلي : 


<html dir=rtl> 

<head> 

<1†1e)/>الصفحة‏ الرئيسية<ع])ز)> 
</head>‏ 

<body bgcolor= #009933> 
<center> 

<font size=] 8pt<دllخ‎ دnn</font>‎ 
</center> 


<ul> 


<li><a href= اير‎ .htm target=maiم<ڈيتاذلا /><و/>السير ة‎ 1< 

<1 /><ه/>درس في تصميم المو اقع <21 ع۲ ص1t.التصnميpم=f <li><a hre‏ 

</ul> 

:للاتصال بنا 

<a href=mailto:moh_ khalid @yahoo.com>moh_ khalid @yahoo.com</a> 
</body> 

</html> 


في متالنا هذا لاحظ : 


<frame src= رll.htm‎ name=content> 
اسمينا الاطار الاول بالاسم ٤٣عمهء ووضعنا الصفحة الرئيسية كصفحة افتراضية‎ 
لهذا الاطار‎ 
<frame src=pڍnصڀتl‎ htm name=main> 
Ae, Cel A Tm E E 
الاطار‎ 
<li><a href= .ڍر‎ htm target=main>ةخيتئاذلا /><ھ/>السیر ة‎ 1< 
maln وضعنا الهدف لهذا الارتباط التشعيبي هو الاطار المسمیى‎ 


<1/><ه/>درس في تصميم المو اقع < د21١1‏ عع 2۲ 1ط .التصميnم=refإh <li><a‏ 
وضعنا الهدف لهذا الارتباط التشعيبي هو الاطار المسمى اجوہ 


طبق المثال اا ع اوك ر لاحظ ان ا ت 


الان لو كان لدينا مائة ارتباط تشعيبي هل سنذهب لنكتب عند كل واحد منها 
target=main؟!‏ 

الجواب هو لا هناك حل اسرع وهو استخدام الوسم <عوهط> مع الصفة اعع۲ه] والتي 
تلحق بدورها باسم الاطار الهدف ويكون ذلك بجزء راس الصفحة (ضمن <لهءط>) 
ولانفعل شيئًا عند الارتباط التشعيبي. 

لنطبق ذلك على مثال 28 فيصبح كود صفحة .]ط. الرئيسية كما يلي : 


<html dir=rtl> 

<head> 

<[)1)/>الصفحة الرئيسية<ع])])> 

<base target=main> 

</head> 

<body bgcolor= #009933> 

<center> 

<font size=] 8pt<دllخ‎ دn<n</font>‎ 

</center> 

<ul> 

<زا/><و/>السيرة الذاتية< ٤ط‏ .السیر <li><a href=‏ 
<11/><ه/>درس في تصميم المو اقع< ط.التصمیم=۴ ع۲ ۾><i¡[>‏ 
</ul>‏ 

:للاتصال بنا 

<a href=mailto:moh khalid @yahoo.com>moh_ khalid@yahoo.com</a> 
</body> 

</html> 


(استعمال )۴٥۲ ٥‏ 
وعنوان بريده الالكتروني ....الخ. 


ولعل من أهم عنصر تكوين النموذج (۲إ0]) ما بلي: 


1. نص ()×ع)) س 
ومن الامثلة عليها ادخال الاسم والبريد الالكتروني . 


وديع اسعد ویدخل فيه ذ 


2. لم ٺر ) (password‏ ---------------> __***<**_| ويدخل قيه نص 
لکن ما يظهر هو عبارة عن نجوم ومن الامثلة عليه ادخال كلمة السر 


3. مساحة نص (4ع۲ج )x×ع)) a‏ 
ويدخل فيه نجموعة نص ومن الامثلة 
عليه كتابة التعليق او كتابة الراي 


اختر الدولة 
4. اختیار (ءم1مء) کک کے اخترالدولة || 


ویتم هنا وضع عدة خيارات حتى يقوم المستخدم باختيار احدى هذه الخيارات ومن 
الامثلة عليها اختيار الدولة او اختيار العمر او اختیار نوع الاتصال . 
5. صندوق فحص (×٥ط‏ k٥eطء) Yahoo‏ 7 
ويتم هنا وضع خیار والى جانبه مربع يمكن وضع فيه اشارة صح (/) فیقوم 
المستخدم بوضع الاشارة اذا اراد الخيار وإلا لا يضع اي شيء ومن الامثلة عليها 
اختيار عدد من محركات البحث المفضلة (یمکن اختیار جیمیع الخيارات) 
6. صندوق اختیار (10لھ۸()۲٥1:0اpہ)‏ ----------< دکر ت 

انٹی ۲2 


بوضع الاشارة الى خيار واحد فقط ومن الامثلة على ذلك اختيار الجنس (ذكر او انثى) 
فيقوم المستخدم باختيار واحد من الخيارين . 


7. زر( ۸٥)اںط):‏ وهو يقسم بدوره الى ثلاثة اقسام وهي : 
6 زر موافَة(اندہubء)‏ موافق وهذا الزر يوضع 
OEE eR E OE‏ 
6 زر مسح (reset(‏ ا مسح الحقول وهذا الزر يوضع 


6 زر من صنع المصpa (user defined)‏ قراءة الشروط 
وهذا الزر يضعه المصمم وذلك للقيام بوظائف معينة عند الضغط عليه 
کات ار شر وک اہ ار ج 2 


هذه العناصر مبينة في الصورة التالية : 


2 التسجيل‎ , herre Kx parrr 


۸ 1 ا‎ 
4 2 i a Fp rea © - A-a T- 
EC Ooo eis sra Stig inky airlpetop' feq Hir e E1 * Bret 


taxi TUTTI القترن‎ 


Taher: e] 
check o ارقم اشحلا اع ملچ‎ 
HSH E 


text area ا‎ 
| button... 1L1 | 


doom gl Fy Cima 


الان 2E‏ النماذج فق غه الهتمل يجب ان نعرف الامور التالية : 
1. النموذج اما يكون لجلب البيانات (عع) او لبعث البيانات (اءهم) ونحن معظم 
تعاملنا سوق يكون مع بعث البيانات (اوهم). 
2 بت ج 1 E e‏ 
الل د رن ها امن ا و 


U 


لعمل النموذج نستخدم الوسم <صإه> كما بلي : 
1 


<form name=..... method=.4... aClIOn 


</form> 
. .يوضع هنا اسم للنموذج وهذا عادة يكون لاغراض البرمجة‎ 1 
2.يوضع هنا نوع النموذج هل هو یمم او ٥ع وکما قلنا اننا سوف نستخدم وهم‎ 
.يوضع هنا عنوان صفحة ال۴ ۸8 او الاميل مسبوقا بكلمة :)انه وكما قلنا‎ 3 
اننا سوف نستخدم الاميل‎ 


لعمل )×ع] نستخدم الوسم <اuامما>‏ مع الصفة عمر) متبوعة بالقيمة )×ع) كما 
ا + 
<1nput type=text name=...... STZ >‏ 
1.يوضع هنا اسم لل×م] وهذا عادة يكون لاغراض البرمجة. 

2 .يوضع هنا رقم يمثل عدد الحروف والارقام التي يستوعبها هذا ال×م). 


لعمل إإ0 سووهم نستخدم الوسم <اuام‏ 1> مع الصفة عمس متبوعة بالقيمة 
04سsءءهم‏ کما یلي: 

<input type=password name=. 1.. maxlength=.Z.. size==. .3..>‏ 
1. يوضع هنا اسم لل لاه سووهم وهذا عادة يكون لاغراض البرمجة. 
2. يوضع هنا رقم وهو يمثل اكبر عدد من الحروف والارقام يمكن وضعها في 
password dl‏ . 
3. يوضع هنا رقم يمثل عدد الحروف والارقام التي يستو عبها هذا الل0۲سويهم . 


لعمل 4١۲ج‏ {×ع] نستخد الوسم <هعإه)×م)> كما بلي : 


<textarea name=. 1. rOWS=.Z... cols=... 0 <fextarea> 
1.نضع هنا اسما ل وعإه)×مع]† وهذا عادة پستخدم 2 حالات البرمجة‎ 

2.نضع هنا رقما يمثل عدد السطور ل 4عإج)×ع) 

3. نضع هنا رقما يمثل عدد الاعمدة ل ه٥۲و)×ع)‏ 

4 نضع هنا نصا ليكون كقيمة ابتدائية لهذا الهعإه)×م] متلا "اكتب ملاحظاتك 
هنا" 


لعمل ]1ءء نستخدم الوسم <ءم][عوء> والوسم < 10امم> لوضع الخيارات كما 


يلي : آ 
<select name=....... > 3‏ 
SOPOT ESE .. </option>‏ 
OP TO ONE TO SI CMA... </option>‏ 
</select>‏ 


1. يوضع هنا اسم لل ٤ءع[عء‏ وهي عادة لاغراض البرمجة 

2. يوضع هنا قيمة للوسم <«0نامه> وهي بمثابة اسم لها وتستخدم لاغراض 
البرمجة . 

3. توضع هنا الخيارات 

اذا اردنا ان تكون احدى الاختيارات تظهر كقيمة ابتدائية نضع كلمة لع)ءء][عء بعد 
الصفة عu‏ اج۷ . 


لعمل ال ×0ط )ءعطء نستخدم الوسم ح<اuمما>‏ متبوعا بالصفة ءمر] والتي 
تتبع بالقيمة ×0 )عط كما بلي : 

<input type=checkbox name=. 2" 5‏ 
1.نضع ھنا اسما checkbox Û‏ وهي عادة تستخدم لاغراض البرمجة 
2. نضع هنا الخيار 
اذا اردنا واحد من الخيارات او اكثر ان يكون معلم بالعلامة كقيمة ابتدائية نستخدم 
عندئذ الكلمة إع)ععطع بعد الصفة عصهم . 


لعمل ال مزل هع نستخدم الوسم حنم مز> متبوعا بالصفة ممر] والتي تتبع بالقيمة 


1. نضع هنا اسما لل ماله و يجب ان يكون اسما واحدا لكل الخيارات وهو 
لاغرا ت اا اة ن ف اسا 2 ا 
کک 

2. نضع هنا قيمة لهذا ال 10له؟ وذلك للتميز بينها بما ان الاسم سيكون موحدا. 
3 نضع هنا الاختيار . 

اذا اردنا أن يكون اك الاختيارات معطم بالعلامة كقيمة ابتدأثة دات آ1 
checked‏ بعد الصفة عva]u.‏ 


لتصميم زر موافقة (٤1طاںء)‏ نستخدم الوسم <اuمما>‏ متبو عا بالصفة عمر) 
والتي تتبعها القيمة ندم طنء كما يلي : 
<input type=submit value=.]...>‏ 
1.نضع هنا القيمة الافتراضية لزر الموافقة فالقيمة الابتدائية هي رإعيي اص طنء فاذا 
اردنا تغیر ها نستعمل عں[ھ۷ . 


لتصميم زر مسح (عءع۲) نستخدم الوسم <اام "> متبوعا بالصفة عمر] والتي تتبعها 
القيمة ٤6ء٥‏ كما يلي : 

<input type=reset value=. .1..>‏ 
1.نضع هنا القيمة الافتراضية لزر المواففة فالقيمة الابتدائية هي reset‏ فاذا اردنا 
تغیر ها نستعمل عں[ھ۷ . 


لتصميم زر من صنع المصمم (ل1 اع إموں) نستخدم الوسم <اuامما>‏ متبوعا 
بالصفة ممر) والتي تتبعها القيمة م))ںط كما يلي : 

ا <input type=button value=.‏ 
1.نضع هنا القيمة الافتراضية لهذا الزر . 


وسوف يتضح الامر أكثر عن طريق المثال التالي: 


3 ر اللسجي‎ hier mrt apart, ¢ [HW urkang IT n] 


d A û Pe gr © 2-3 - U 


i E Cros sid Stig jain sior pedkop forma Fire e B1 * gam 


الم 
نة العزرر 
اليقمل ® لر 
1 انش 
الموش الشسلة Tahar BH]‏ 
cal‏ 
HSH E‏ 


لرل لرن ب 
َنب تيليظك هفتا 


عدد الحروف والارقام التي يستو عبها الئ×م] التابع للاسم اكبر من عددها 
التي يستو عبها ال ١۲م‏ سووهم التابع لكلمة المرور . 

اقصى عدد ممكن من الحروف والارقام یمکن کتابته لد ل0۲ سووهم هو 
12 

ان اختيار "ذكر" معلم باشارة النقطة كقيمة ابتدائية. 

ان جميع الاختيارات "100ھ" و "ءا0gه6"‏ و "SNN"‏ معلمة باشارة 
الصح كقيمة ابتدائية . 

القيمة الابتدائية أخيارات "اراد" ھی الاردن" 

القيمة الابتدائية لل وهه ×م) هي "اكتب تعليقك هنا" 

القيمة الافتراضية لزر اأصطانء هي "تسجيل" 

القيمة الافتراضية لزر عو هي "مسح الحقول". 


PEER مم‎ e) n f 
o 


&nbsp;&nbsp;j&nbsp;&nbsp;&nbs 
Pp; 

<select name=country> 

<option value=jo>jدرYl</option>‎ 
<option value=ph>jıط¦ul</option>‎ 
<option value=sr>ly رgw</option>‎ 
<option value=eg> رصn</option>‎ 
<option value=su>يد‎ gzull</option> 
</select> 

<br> 

التعليقات 

<textarea name=comm rows=10 
تعليقك هنا<80=و[ەع‎ بتكا>/)extar‎ e< 
<br> 

<input type=submit value=Jıجست>‎ 
&nbsp;&nbsp;j&nbsp;&nbsp;&nbs 
Pp; 

<input type=reset value 
<"الحقول‎ 

</form> 

</body> 

</html> 


مسےم 


<html dir=rtl> 

<head> 

<title>Jıجıتll</title>‎ 

</head> 

<body> 

<center> 

>h1<ليجستلا>/ط‎ 1< 

</center> 

<form action=mailto:software en2002@yahoo.com 
method=post> 

الاسم 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<input type=text name=txt1 size=100> 

<br> 

كلمة المرور 

&nbsp;&nbsp;&nbsp;j&nbsp;&nbsp; 

<input type=password name=ps1 size=50 maxlength=12> 
<br> 

الجنس 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

<input type=radio name=r1 value=male checked> jSذ‎ 
<br> 
&nbsp;j&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp 
;&nbsp;&nbsp;&nbsp; &nbsp; 

<input type=radio name=r1 
value=female>y٬`ڦٹil&nbsp;&nbsp;‎ 

<br> 

المواقع المفضلة 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;‏ 
&nbsp;‏ 

<input type=checkbox name=Yahoo checked> Yahoo 
<br> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp 
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp 
;&nbsp;&nbsp;&nbsp; 

<input type=checkbox name=Google checked>Google 
<br> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp 
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp 
;&nbsp;&nbsp;&nbsp; 

<input type=checkbox name=MSN checked>MSN 


داخل جدول اي سوف نقوم بالتعديل على الكود ليصبح كما يلي : 


<ل)/>البلد <> 

<td><select name=country> 

<option value=jo>jدر</option>‎ 
<option value=ph> jıطbud</option>‎ 
<option value=sr>ly رgw</option>‎ 
<option value=eg> رصn</option>‎ 
<option value=su>ةuدyzull</option>‎ 
</selec</td> 

<tt> 

<tr> 

<ل)/>التعليقات <> 

<td><textarea name=comm rows=10 
تعليقك هنا<80=و|[ەع‎ بتكا>/textarea></td<‎ 
</tr> 

E 


<td><input type=submit 
va] u e=لیجست<>/‎ d< 
<td><input type=reset value 


<ل)/><"الحقول 


مسح 


</tr> 
</tbody> 
</table> 
</form> 
</body> 
</html> 


<html dir=rtlm 

<head> 

<tit]e>Jıجıتll</title>‎ 

</head> 

<body> 

<center> 

<>h1<لیجستلا>/ط‎ 1< 

</center> 

<form action=mailto:software en2002@yahoo.com 
method=post> 

<table> 

<tbody> 

<I> 

<t{d>pwll</td> 

<td><input type=text name=txt] size=100></td> 
</tr> 

<tr> 

<ل)/>كلمة المرور <ل)> 

<td><input type=password name=ps1 size=50 
maxlength=12></td> 

</tr> 

<tr> 

>< سنجلا>/†d<‎ 

<td><input type=radio name=r1 value=male 
checked> رSذ‎ 

<br> 

<input type=radio name=r1 value=female>”أڦڌil</td>‎ 
e 

<I> 

<ل)/> المواقع المفضلة<ل)> 

<td><input type=checkbox name=Yahoo 
checked>Yahoo<br> 

<input type=checkbox name=Google 
checked>Goo gle<br> 

<input type=checkbox name=MSN 
checked>MSN</td> 

</tr> 

<I> 


3 اقسجیل‎ , ileri nerme 


Fk EJ ima Fale Tok Help 3 
3=: ©- BB OP gr © 2-B 3-A 
a LÎ ت‎ EI * aer 


التسجيل 


لاوا 


3 8 N 1 e e 
کر و )| دا - ر ك‎ rk @ = Mh 3 i 


E ÛC eais ard Selirege pra nizîy air 1pedbopif oii hirs اه‎ E3 * Bret 


الاسم بویع اسف حجار 


ت ررر فقفققة فة 


اقعولع شابة فى الروت بع عاك نلاعشات تي التتضيم نئل تدم الثبات في الو ان 
افغتلفيات م اقا ضرر عتفباتك الجدرل شامقة مالم انها قاطية 
م شق ى «سائسظة آيضا وقي أفافة ضاطات توتققة الى عة للفباف طم العشتت 
قذ أ بع ااعتن اني الطذبد 
| اتعياتے 


BÎ one Wg Fy Cua 


وعند الضغط على زر تسجيل (صطاuء)‏ يظهر لنا صندوق الحوار التالي: 


Microsoft Internet Explorer 


This Form is being submitted using e-mail. 
Submitting this Form will reweal Your e-mail address to the recipient, 
and will send the Form data without encrypting it For privacy. 


Yol may continue or cancel this submission, 


EET OEE 
وعند الضغط کے زر مسح الحقول(عویع۲) تعود الشاشة الى حالتها الاإاصلية كما‎ 


3 اأقسجيل‎ , hers nereet Ciplarer 


Rk EF ea Fate; ok Hy . 
گا ا‎ 0 | Search E Farecrkan ا - چ‎ 3< E i 
E] amr sd Selinger sior pedtepf omi Fire E 2 a 


عة مرون 

لیل ےا 
شی 
Tahse E‏ 

لر هم فشن 1 بء بت 
HSHE‏ 

لیف لاقي 5 
انب لبلبطفك سا 

il 

إتسبل] | ست اسول ] 


j ome gl MH Camis 


مااكظة : 5١‏ 657 آل تكرن 1 1 £25 GEE 7, I‏ 
الارن فاا ار ر د ما لی 


<option value=su selected>iyدgzull</option>‎ 


و بهذا الدرس نكون قد انعينا شرحنا المبسط للغة العتمل 
ولكن كنصيحة اقدمها لك عزيزي القاري؛ انصحك بتصهيو هوفع صغير 
تدرا فمتدته اى وة و ااا ا چا کا 
O I A J O‏ 
وفههته بشگل جید . 


E 1ھ‎ e | 


عن طريق الاعيل الټالي: 
software en2002@yahoo.com‏ 


و كما تلاحظ فان هذا الكتايج مجانبي وقابل للطباعة و ها أريده 
فقط هو دعوة صالحة لي فيي ظعر الغيبب فلا تزسونا هن دعايْكم لكن 
ار جو اس كرا المر اا ا 1 


نراخه قريبا في الجزء الثاني من هذه الموسوعة وهو باسان ال 
سو بقفاول لغة الجاذا سگربة . 


ملحق 1 


ما هو الفرق ما بن HTML‏ و jı‏ DHTML؟‏ 

6 الفرق سهل جدا ان جميع ما تم شرحه في هذا الكتاب هو عبارة عن 1۲1 اي 
بمعنى اخر هي عبارة عن اللغة التي من خلالها يمكننا تصميم مواقع الانترنت 
وهي تختلف عن ]0(1 في كون هذه الاخيرة تعتمد على وجود 
(عنصهمرك) في الصفحة ويكون ذلك ياما عن طريق النماذج (ط۲٥])‏ التي تم 
شرحها في هذا الكتاب او عن طريق دمج لغة M1‏ آ1 مع لغات برمجة مثل 
VB script s Java script‏ . 


ما هو الفرق ما ju, HTML jı‏ XHTML؟‏ 
6 قد يعتفد البعض انه هناك فرقا كبيرا بين اللغتين لكن يمكننا القول ان هذا الاعتقاد 
خاطئ حيث ان هناك فقط اثني عشر فرقا بينهما سوف نذکر بعضها هنا وهي 
تلك التي يمكن فهمها استنادا لما شرح في هذا الكتاب اما لمن يريد الاستزادة فليقم 
بزيارة الموقع التالي : 
http://www.w3.org/TR/xhtm11/#diffs‏ 
(الفقرة الرابعة 4 Differences with HTML‏ .4( 
ونذكر الاآن الفروق التالية : 

1 .عند فتح الوسم يجب اغلاقه مثلا : 


E </p> 
ايضا يجب الاهتمام بترتيب الاوسمة مثلا:‎ 
ع><م> لاحظ ان الخطوط لا تتقاطع‎ < ........... </em></p> 


2.جمیع الاوسمة و الصفات يجب ان تكتب بحالة الحروف الصغيرة 
)10wer cas (‏ مثلا: 


<1> ولیس <[ >. 
3جمیع قیم الصفات یجب ان توضع بین اشارات اقتباس " " حتی لو کانت قیم 
رة ية 


.<table border=1> uly <table border=”717> 
: 4.جميع الاوسمة الرئيسية (عها «زوص) يجب ان تنتهي ب( / ) مثلا‎ 
.<br><hr> ly <br /><hr /> 


ملحق 2 
ما هي لغة 88ع ؟ 
868 وهي اختصار Cascade S†y]ء Shee‏ ويعتبر ها البعض لغة برمجة قائمة 
بذاتها ووظيفتها الاساسية هي التحكم ب مإر†ء صفحة الهتمل من التحكم بالمحاذاو 
الى التحكم بصورة خلفية فقرة او إل الى التحكم بلون كل خط من خطوط اطار 
(یمین ¢ یسار »اعلی ¢ اسفل)الى....الخ 


اقوم باصدار كتيب صغير يتناول هذه اللغة ؟! 


اما الان فسنتناول جز ء بسيط جدا من 8S‏ وهو استخدام C88‏ كصفة مع 
الاوسمة وخاصة مع الوسم .<dIv>‏ 


او لا لنستخدم ال °88 كصفة فاننا نستخدم الصفة ع[رء مع الاوسمة وتوضع قيم 
هذه ۱ لصفة بين اشارتي اقتباس " " وتفصل بينها فاصلة منقوطة . مثلا: 


<p style=” font-we1lghtebold;font-size=30;font-style=italic” >‏ 
لاخظ اسك فة عآراو ماه ٠‏ ا ع 
بين اشارتي " " وتفصل فيما بينها فاصلة منقوطة. 
لاحظ ان الصفة ء[رء كأنها تحتوي على صفات جزئية وهي اطعا س-ا«ه؟ و 
font-style gs font-size‏ . 
لجعل الخط غامقا< font-weight=bold-------‏ 
لجعل حجم الخط 30< font-size=30------=-‏ 
لجعل الخط مائلا< font-style=italic-------‏ 


ملاحظة : يمكن استخدام ( : ) بدلا من (=) وهو الافضل . 


سوف ننتقل الان لمثال نستخدم فيه مجموعة من الصفات الجزئية للصفة عارك . 


hl c1 Mrmr Exe erer + Werin Of me]‏ - قط ا3رلم ل 
Fk EE ima Fate Tok Helge r‏ 


E û Pe gp @ 2-y 3-a 


bn E Tarai sid Stiregg pda iniry sir Deak prtaea hil ت[ عه‎ * xe 


عك لاناق 
O a‏ 


<html dir=rtl> 

<head> 

<title> 

صفحتي الاولى 

<l/title> 

</head> 

<body > 

<center><font si1ze=20pt<> بسم الله الرحمن الرحيم‎ >/f0nt<>/center> 
<div align=center 1d=div1 style="font:1 8pt arial;jcolor:red;jbackground- 
color:pink'"> 

عالم السيارات 

</div> 

<div align=center 1d=div2 style="background-image:url(DawnOverWater.jpg)"> 
1ل/>أھلا وسھلا بکم‎ ۷< 

</body> 

</html> 


: شرح الكود‎ 
style="font:18pt arial;jcolor:red;background-color:pink" 


الخط حجمه 18 ونو عه [ها]ج < font:18pt arial---------‏ 
لون الخط احمر< COIOREJ‏ 
لون الخلفية زهري < background-color:pink------------‏ 


وضع صورة background-image:url(DawnOverWater.jpg)------> yl‏ 
هي الصورة التي اسمهاعمز.١ءة‏ ۲۷ء0۷ ,سه( والتي تقع في نفس مسار الصفحة 


ملاحظة:كلمة 1إ تابتة لا تتغير في اي حالة الذي يتغير هو ما بداخل القوسين 


وهناك الكثير الكثير يمكن قوله عن 688 لكن كما قلنا اننا سنصدر كتيب خاص به فيما 
بعد , 


ملحق 3 


نستطيع ان نستخدم الوسم <ههمم> وذلك لاعطاء محركات البحث فكرة عن محتويات 


ويكون ذلك اما باعطاء وصف عن محتویات کل صفحة(10۸ام۲1یه) او اعطاء 
کلمات مفتاحية لکل صفحۂ(dsإ ٥‏ ywع))‏ . 


E 
<meta name="description" conte nt="gقl <''ش رح كامل لتصميم وبر مجة |لئمو‎ 
.)dمsعcا1ما10۸(ةحفصلا هذه الطريفة تمثل اعطاء وصف عن محتويات‎ 

<meta name="keywords" contente"HTML, DHTML, XHTML"> 
. هذه الطريقة تمتل اعطاء كلمات مفتاحية للصفحة(ءلإ0سرء))‎ 


لاحظ اذا ان الامر يحتاج فط 2 الوسم <metaz>‏ وgو‏ الصفتين content gy name‏ 
عن محتويات الصفحة(۸٥1ام۲1ءءءل)‏ او كلمات مفتاحية للصفحة(ءلإ0سرم)). 


ملحق 4 
نصيحة: 
قد يجول في خاطر البعض ما هي ضرورة تعلم لغة مثل الهتمل وهو من الممكن 


الجواب هو انه مهما كان الشخص خبيرا في برنامج الفرونت بيج متلا الا انه سيتعرض 
الى عدة مواقف يضطر عندها الى فتح الكود و التعديل عليه (هذا يحدث عند ممارسة 
التصميم لفترة من الوقت) وهذا يتطلب معرفة جيدة باللغة .ايضا لتطوير الموقع واضافة 
السكريبتات عليه فانك تحتاج الى التعديل على الكود اذا لم يكن اعادة كتابة معظمه . 


ولذلك فان الشخص الذي لديه معرفة عادية عن البرنامج سيضطر كثيرا وكثيرا لفتح 
الكود والتعديل عليه هذا اذا كان متقن لهده اللغة بشكل جيد . 


على اية حال انا لا انصح بكتابة الكود كامل باستخدام برنامج notepad‏ الا للتعلم اما 
لممارسة التصميم فيمكنك استخدام برنامج فرونت بيج 3 على سبيل المثال وبالتالي 
يمكنك التصك راكد اكاد العو دة ال ا 


E icrusuil Frei Fage r nirrt_ page _ 1 
FB Bl ei met Fama Toh Taha Ga Farm rde Hd 
EEE CT Ea CATT EEE ICEL) 


2 hkrraal Tres Hiei Fain 2 2 IE Î IBE Z7 UIE FE "TT" 4 الا‎ EFT ج ق اك ا ا‎ | 


[THI ub aE || aew_page_1 Mims 


DIDI [OLE EAS Deak Del 


لاحظ في الصورة التالية كيف ان الكود يتم تلوينه لتميز الاوسمة عن الصفات عن القيم 
عن.. CR a OO mye‏ 
عليك الاختيار فقط . 


E Micrusuil FremlFage r C:Daruenents oa Û Seti ns A fami rnislr al hesir 1p wea rha , Irma] 


FB Bll Wei met Famed Tach Talla Gela Farms reke Hap ب‎ hi $ 
ESS RR AI د‎ ۳ 


Coenterete prit aides 2p بكم ا الزعي اللرسيم‎ nk EE 


|Stiw Bliqmapentere idiva styler barrpround-daagerurl (DmwhierMater . {aT | "7 
رسا ہکم‎ 
a 


La 171, ahan 2 Tersê 1 GE 


والان سوف ناخذ كيفية عمل ادراج الجداول عن طريق القرونت بيج 2003 كمثال على 
احد الدروس التي تم شرحها في هذا الكتاب . 


من قائمة ع[طه) اختر ۲۲٥ء1‏ ومنها اختر م1طاه) كما في الصورة: 


Microsoft FrontFage - new_pape_1.htm 


: Fil Edt ew Irsert Fara Tools Data Framës Window Help 


1 E EET EE Ee 2 Layout Tables and ells... EREN 3 


E Draw Table 


a 
11 
bor 
1 
E 

IN 
iF 

1 


Horrnal + Tires Mew Roman EE 


1 [bad +| EB) 


new_page_1.htm™ 


Roms or Zolurmns 


Table Properties ۴ 


ا 


Insert Table 2K 


Layout Tools سوف یظهر صندوق‎ 
Enable layout tools ار التا الذ‎ 1| 
O Disable layout tools لي £ ا‎ 8 
(®) Automatically enable layout tools based onı table content جل یمکن اپ‎ 

عدد السطور والاعمدة 
2 م چ ا 
ولحديد سمك اکر | Columns: E‏ $| 
وتحديد خلفية الجدول 
و ا کما Alignment: [Default | [¥] sperify width:‏ 
ره Float: | Default | |100 2 E‏ 
(In percent‏ ا لے 1 
ell padding: l1 1 LISperify height:‏ 
ell sparing: ٤ 1‏ 
Table Direction: |‏ 
Borders 1 +‏ 
ټحطیط . مله الأطار 
Size! 1 8 Light border: | |_| Automatic‏ 
wv Dark border: Automatic‏ أ Lolar:‏ 
اختر Ll Eallapse table border ok‏ 


Background 


لون خلفية لحي لا Automatic‏ . 1 


us EE background E 


تحكيد صورة لتكون خلقية الج 


[Set as default For new tables 


SEE, 


ض هة 


LARA 


اذا كما تلاحظ يمكن استخدام التصميم عن طريق البرنامج مع استخدام تبويب الكود 
للتعدبل ا 


في متالنا السابق يمكن التعديل على الكود لتعديل العنوان <ع][))> ولاضافة وسم 
الحوار وهكذا.... 


ارج ان يكر اقصدي و نڪيحتي قد وضلت 00 70 1 ع ا 
على اهمية تعلم اللغة على الاقل لمن يريد تعلم لغات برمجة المواقع. 


